javascript - 使用 componentDidUpdate react 无限循环

Question

我正在尝试创建一个基本向导，包含 3 个步骤。在我的根文件中，我在构造函数中设置了我的状态:

constructor(props) {
    super(props);
    this.state = {
      currentStep: 1,
      data: {
        firstname: 'James',
        surname: 'Smith',
        country: 'Australia',
      },
    };

我的向导有 3 个“步骤”，下面是我如何渲染其中一个的示例:

<DataEntry currentStep={this.state.currentStep} data={this.state.data} afterValidate={this._nextStep} moveBack={this._prevStep} />

然后在步骤中，我的构造函数是:

  constructor(props) {
    super(props);
    this.state = { data: this.props.data };
    this._validate = this._validate.bind(this);
    console.log(this.state);
  }

所以我根据作为“数据”传入的 Prop 设置步骤的状态。

我的 onChange 是通用的，所以每个“字段”都有一个 onchange，这样做:

  onChange(fieldName, fieldValue) {
    const thisData = { ...this.state.data, [fieldName]: fieldValue };
    this.setState({ data: thisData });
  }

当我使用“下一步”按钮进入下一步时，我在“步骤”组件中调用了一个方法:

  _validate() {
    console.log('Validating...');
    this.props.afterValidate(this.state.data);
  }

这会调用我父组件中的方法来更新数据:

  _nextStep(data) {
    console.log('Next');
    let currentStep = this.state.currentStep;
    console.log(currentStep);
    currentStep = currentStep >= 2 ? 3 : currentStep + 1;
    this.setState({ currentStep, data }, ()=>{console.log('New state: ', this.state)});
  }

还有这项工作。但是这个问题是我似乎陷入了循环，因为我需要更新其他“步骤”组件中的状态。每个步骤都有:

  componentDidUpdate() {
    console.log('Data Entry got Prop Update...');
    this.setState({ data: this.props.data });
  }

所以，当父级中的状态更新时，它需要更新步骤中的状态......但是我似乎陷入了一个暴力循环:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

我猜他们都在调用“componentDidUpdate”，因为父状态基本上更新了所有步骤，然后他们反过来通知父状态已更新？

实现这一目标的正确方法是什么？基本上，我希望父级中的数据成为真相的来源，然后在每个“步骤”中更新更新此状态，并传播到步骤。

Answer 1

此问题已在 React 文档中描述:

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop.

更多信息:componentDidUpdate()

此外，为了比较 prevProps 和 currentProps，你可能会想到 Object Comparison in Javascript .

在 javascript 中有几种比较两个对象的方法。例如:

1) 快速且有限的方法

当你有简单的 JSON 风格的对象时工作，里面没有方法和 DOM 节点:

JSON.stringify(obj1) === JSON.stringify(obj2)

属性的顺序很重要，因此对于以下对象此方法将返回 false:

 x = {a: 1, b: 2};
 y = {b: 2, a: 1};

本例取自:Object comparison in JavaScript