Реакция: Как отправить конкретные данные в конкретный экземпляр компонента, созданного с помощью .map

Question

Я создаю несколько экземпляров дочернего компонента из родительского компонента, например:

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

Когда создаются компоненты EachAccount, каждому из них предоставляются уникальные данные, которые прекрасно работают, и каждый компонент State EachAccount уникален.

Но я хочу передать данные только одному из этих экземпляров ПОСЛЕ того, как они уже созданы.

Я попытался передать данные в компонент EachAccount после того, как он уже был создан, но, к сожалению, каждый экземпляр получил данные и, следовательно, состояние каждого из экземпляров было обновлено.

Кто-нибудь знает решение этой проблемы?

Answer 1

Лучшее решение, которое я нашел, - это отправить данные с идентификатором ребенка, который вы хотели бы обновить в качестве реквизита для каждого экземпляра, а затем внутри дочернего элемента создать условие, которое будет обновлять состояние только в том случае, если текущий дочерний элемент Идентификатор и идентификатор отправляемых данных совпадают.

Примерно так будет в компоненте EachAccount:

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

Answer 2

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()}
     )
    }

}