Question

我正在像这样从父组件创建子组件的多个实例：

render() {
    return (
        {this.state.accounts.map(account => 
            <EachAccount key={account.id} curAccountData={account} /> 
        )}
    )
}

在创建EachAccount组件时，会为每个组件提供唯一的数据，这些数据可以正常工作，并且每个Account组件的状态都是唯一的。

但是我想将数据创建后仅将其传递给其中一个实例。

在创建数据后，我尝试将数据传递给EachAccount组件，但是不幸的是每个实例都获取了数据，因此每个实例的状态都得到了更新。

有人知道解决方案吗？

Answer 1

class YourComponent extends Component {
    renderAccounts(){
      return this.state.accounts.map(account => {
         if(certainCondition){
           // return Each Account with extra data
         }

         return (
           <EachAccount key={account.id} curAccountData={account} />

      })
    }

    render(){
     return (
       {this.renderAccounts()}
     )
    }

}

Answer 2

我发现的最佳解决方案是将带有要更新的子代ID的数据作为道具发送给每个实例，然后在子代内部创建一个条件，该条件仅在当前子代为条件时才更新状态ID和发送数据ID匹配。

类似的事情将在EachAccount组件中：

componentWillReceiveProps(nextProps) {
     if(nextProps.updateBalanceFromId === this.state.curAccountData.id){
         this.getBalances(nextProps.updateBalanceFromId)
     }
};

React：如何将特定数据发送到使用.map

2 个答案: