ReactJs : Créer des composants à partir d'un tableau conduit à de vieux props

Question

J'ai un tableau de noms d'utilisateurs ["frank", "john", "stevie"] . en bouclant sur chaque élément, je crée un ChatBox composant :

{
  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)}
    />
  ))
}

Cela semble assez simple. J'ai besoin de faire un appel ajax une fois que les composants sont rendus, donc j'appelle ceci :

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

Le problème : J'ai remarqué que les composants rendus définissent les props de nom avec la valeur initiale de "frank" dans le fichier de configuration de l'utilisateur. ["frank", "john", "stevie"] . c'est-à-dire que si j'ai cinq éléments dans le tableau, les quatre derniers éléments ont une valeur initiale du premier élément du tableau ! Et il est très important qu'un appel ajax soit fait une fois que le composant est rendu, mais si les appels sont faits en utilisant la valeur du premier élément du tableau, les composants résultants auront tous les mêmes données que le premier composant. c'est défectueux.

J'ai essayé getDerivedStateFromProps() y componentDidUpdate() mais cela semble peu pratique car le premier composant qui est rendu a la valeur correcte et change rarement, donc l'appel ajax n'est pas fait.

Existe-t-il un moyen de faire en sorte que tous les composants rendus aient les bons props pour que je puisse faire l'appel ajax sur componentDidMount .

Answer 1

@FrankDupree Cela peut se produire car vous passez l'index du tableau comme valeur clé au composant chatbox. Essayez de passer l'itemName comme valeur clé pour le composant 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)}
    />

Je pense que ça pourrait marcher pour toi.

Veuillez passer par là : https://medium.com/@vraa/why-using-an-index-as-key-in-react-is-probably-a-bad-idea-7543de68b17c pour une meilleure compréhension.