ReactJs：从数组创建组件会导致旧道具

Question

我有一组用户名["frank", "john", "stevie"]。循环遍历每个元素，我创建了一个 ChatBox 组件：

{
  popups.map((x, i)=>(
    <ChatBox 
      addMessage={this.addMessage} 
      delMessage={this.delMessage} 
      setMessages={this.setMessages} 
      getMessages={this.getMessages} 
      name={x} 
      users={this.state.users} 
      id={x}
      key={i}
      user={this.fetchUser(x)}
    />
  ))
}

它看起来很简单。渲染组件后，我需要进行 ajax 调用，所以我称之为：

componentDidMount() {
  console.log(this.props.name)
  //make ajax call using `this.props.name`
}  

问题： 我注意到渲染的组件在["frank", "john", "stevie"] 中将name props 的初始值设置为“frank”。即如果我在数组中有五个元素，最后四个组件的初始值是数组中的第一个元素！。并且非常重要的是，一旦组件被渲染，就会进行 ajax 调用，但是如果使用数组中第一个元素的值进行调用，则生成的组件都将具有与第一个组件相同的数据。这是有缺陷的。

我尝试了getDerivedStateFromProps() 和componentDidUpdate()，但这看起来很棘手，因为渲染的第一个组件具有正确的值并且很少更改，因此不会进行 ajax 调用。

有没有一种方法可以让所有渲染的组件都拥有正确的道具，这样我就可以在componentDidMount 上进行 ajax 调用。

Answer 1

@FrankDupree 这可能发生在您将数组索引作为键值传递给聊天框组件时。尝试将 itemName 作为 ChatBox 组件的键值传递。

    <ChatBox 
      addMessage={this.addMessage} 
      delMessage={this.delMessage} 
      setMessages={this.setMessages} 
      getMessages={this.getMessages} 
      name={x} 
      users={this.state.users} 
      id={x}
      key={x}
      user={this.fetchUser(x)}
    />

我认为这可能对你有用。

请转至：https://medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c 以便更好地了解。