React向导组件中Step1能否直接修改父组件Props？正确实现方式？

绝对不行！React的核心原则之一就是props是只读的——子组件永远不应该直接修改父组件传递过来的props。这么做会带来两个大问题：

• 违反单向数据流规则，导致数据流向混乱，后续排查bug会非常头疼；
• 直接修改props并不会触发父组件的重新渲染，所以Step2挂载后拿到的依然是原来的dataWizard值，根本达不到你想要的效果。

React的数据流是单向的，子组件想要修改父组件的数据，必须通过父组件提供的回调函数来完成。具体到你的场景，步骤如下：

1. 父组件添加更新数据的回调函数，并传递给Step1 #

修改父组件的渲染逻辑，给Step1传入一个回调函数，比如onUpdateDataWizard：

<Wizard>
  {this.state.step1 && <Step1 
    dataWizard={this.state.dataWizard} 
    onUpdateDataWizard={(updatedData) => {
      this.setState({ dataWizard: updatedData });
    }} 
  />}
  {this.state.step2 && <Step2 dataWizard={this.state.dataWizard} />}
</Wizard>

2. Step1组件调用回调函数，传递修改后的数据 #

修改Step1的updateData方法，不再直接修改props，而是通过回调把新数据传给父组件：

class Step1 extends React.Component {
  // ...其他代码
  updateData() {
    // 先复制一份原数据，避免直接修改原对象（如果是引用类型的话）
    const updatedData = { ...this.props.dataWizard };
    updatedData.idCreation = 432876;
    // 调用父组件传来的回调函数
    this.props.onUpdateDataWizard(updatedData);
  }
}

为什么要复制原数据？ #

因为dataWizard是引用类型（对象），如果直接修改原对象，即使通过回调传递，本质上还是修改了父组件state里的原对象，这会导致不可控的副作用。用扩展运算符{...}创建一个新对象，再修改属性，能保证数据的不可变性，让React的状态更新更可预测。

这样做的好处 #

• 符合React单向数据流原则，数据流向清晰：父组件管理状态，子组件只负责触发更新；
• 父组件调用setState后会重新渲染，当Step2挂载时，就能拿到最新的dataWizard值了。

内容的提问来源于stack exchange，提问作者user2952265