Question

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

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

A的状态对于数组长度具有完全相同的子数，因此，在这种情况下，3。

每个孩子都有如下状态：

state = { validated = true }

问题：对我来说，映射父状态数组以反映每个孩子的状态的最佳方法是什么？

Answer 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);
  })
}
...

Answer 2

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

将子状态映射到父数组状态

2 个答案: