将孩子的状态映射到父数组状态答案

【问题标题】：Mapping state of children to Parent array state将孩子的状态映射到父数组状态
【发布时间】：2018-02-22 03:39:04
【问题描述】：

说明： 我的父组件 A 有一个状态数组，例如：

state = { validatedSteps = [false, false, false] }

对于数组长度，A 的状态具有完全相同的子节点数，因此在本例中为 3。

每个孩子都有一个状态，例如：

state = { validated = true }

问题：映射父状态数组以反映每个孩子的状态的最佳方式是什么？

【问题讨论】：

一种方法是使用callback function。您可以在父级中定义一个函数并使用props 将其发送给子级，然后在子级中如果状态发生更改，则调用该回调函数。
@salman.zare 同意，但是我如何确定应该更新数组的哪个位置？
对于回调函数，您还需要包含 index 以确保您更新数组中的正确项目。

标签： arrays reactjs state

【解决方案1】：

在每个子组件中，当你改变状态时，你可以通知父组件并更新相应步骤的状态。例如，我假设三个组件为Step1、Step2、Step3。

在父组件中，

validateStep(step) {
  let stepsValidated = this.state.validatedSteps.slice();
  stepsValidated[step]=true
  this.setState({
    validatedSteps: stepsValidated
  })
}

<Step1 validate={this.validateStep}/>
<Step2 validate={this.validateStep}/>
<Step3 validate={this.validateStep}/>

在子组件中，我们取Step1，你可以传递适当的索引作为参数，像这样。

...
validate() {
  this.stateState({ validated:true }, 
  ()=> {
    this.props.validate(0);
  })
}
...

【讨论】：

【解决方案2】：

如果我们将 stepsValidated[step]=true 更改为 stepsValidated[step-1]=true ，将是完全正确的。

【讨论】：

我将上述回复添加为正确的回复，因为这只是完成了实际答案，尽管我知道您在发表第一条评论时确实是这个意思。