在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState。 React 限制嵌套更新的数量以防止无限循环

Question

componentDidUpdate(prevProps, prevState) {
const { data } = this.state;

if (prevState.data.date !== data.date) {
  const startDate = new Date(data.date.startDate);
  const endDate = new Date(data.date.endDate);
  const countDuration = new Date(endDate - startDate).getDate();
  this.setState({
    data: {
      ...this.state.data,
      duration: countDuration,
    },
  });
}

if (prevState.data.duration !== data.duration) {
  const startDate = new Date(data.date.startDate);
  const endDate = new Date(
    startDate.setDate(startDate.getDate() + +data.duration - 1)
  );
  this.setState({
    ...this.state,
    data: {
      ...this.state.data,
      date: {
        ...this.state.data.date,
        endDate: endDate,
      },
    },
  });
}

}

但这给了我错误，说超出了最大更新深度。 当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

Answer 1

看起来您在错误的位置更改了 data.date 和 data.duration 属性。 结果，条件prevState.data.date.== data.date和prevState.data.duration.== data.duration永远不会评估为true ，因此每次都会发生setState调用，从而导致无限循环