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"]中将名称props设置为“ frank”的初始值。即如果我在数组中有五个元素，则后四个组件具有数组中第一个元素的初始值！。非常重要的是，一旦呈现了组件，就进行ajax调用，但是如果使用数组中第一个元素的值进行调用，则生成的组件将具有与第一个组件相同的数据。那是有缺陷的。

我尝试了getDerivedStateFromProps()和componentDidUpdate()，但是由于第一个呈现的组件具有正确的值并且很少更改，因此看起来很不客气，因此没有进行ajax调用。

有没有一种方法可以使所有渲染组件具有正确的道具，以便可以在componentDidMount上进行ajax调用。

Answer 1

@FrankDupree这可能是在将数组索引作为键值传递给chatbox组件时发生的。尝试传递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进行更好的理解。

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

1 个答案: