javascript - ReactJs:从数组创建组件会导致旧 Prop

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"]。即如果我在数组中有五个元素，最后四个组件的初始值是数组中的第一个元素!。非常重要的是，一旦组件被渲染，就会进行 ajax 调用，但是如果调用是使用数组中第一个元素的值进行的，则生成的组件都将具有与第一个组件相同的数据。这是有缺陷的。

我尝试了 getDerivedStateFromProps() 和 componentDidUpdate() 但这看起来很老套，因为呈现的第一个组件具有正确的值并且很少更改，所以 ajax 调用不是'吨做了。

有没有办法让所有渲染的组件都拥有正确的 Prop ，这样我就可以在 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以便更好地理解。