React增量游戏(setInterval实现)：状态转换期间无法更新问题

咱们先拆解你遇到的两个警告背后的原因，以及你违反的React核心最佳实践：

1. 第二个警告的核心原因：Render方法必须是纯函数 #

你看到的Cannot update during an existing state transition警告，是因为你在renderNewOption函数里调用了setState，而这个函数是在render方法中被调用的。

React要求render方法（以及任何被render直接调用的函数）必须是纯函数——也就是说，它只能根据当前的props和state返回JSX，不能产生任何副作用（比如修改状态、发起网络请求、操作DOM等）。

当你在渲染过程中调用setState时，React正在执行当前的渲染周期，此时突然触发状态更新，会打乱React的渲染流程，甚至可能导致无限循环（好在你加了newOptionDirty的判断，所以只触发了一次警告，但仍然违反原则）。

2. 第一个警告的潜在风险：组件卸载后的状态更新 #

虽然你在componentWillUnmount里清除了定时器，但如果组件卸载的瞬间，定时器的回调刚好执行，此时组件已经被卸载，再调用setState就会触发Can't call setState on an unmounted component警告。不过这个问题的根源其实和上面的问题相关——如果状态更新的时机不对，就可能在组件生命周期的错误阶段触发更新。

你违反的React最佳实践总结 #

• 禁止在render或render调用的函数中修改状态：render的唯一职责是根据props/state生成UI，任何状态变更都应该放在渲染周期之外（比如事件处理器、生命周期方法、定时器回调等）。
• 状态更新逻辑应该集中在合适的时机：判断是否显示新选项的逻辑，不应该放在渲染过程中，而应该在状态发生变化的源头（比如addCredits方法）或者使用生命周期方法监听状态变化。

修复方案 #

方案一：在addCredits中处理状态判断 #

把判断credits是否达到5的逻辑移到addCredits方法里，这样状态更新就发生在定时器回调/点击事件的上下文里，而不是渲染过程中：

addCredits() {
  this.setState((previousState) => {
    const newCredits = previousState.credits + 1;
    // 在这里判断是否需要开启新选项
    if (newCredits === 5 && !previousState.newOptionDirty) {
      return {
        credits: newCredits,
        newOptionDirty: true
      };
    }
    return { credits: newCredits };
  });
}

// 简化renderNewOption，变成纯函数
renderNewOption() {
  return this.state.newOptionDirty ? (
    <div>
      <Button> Add new feature </Button>
    </div>
  ) : (
    <div>no options until 5 credits</div>
  );
}

方案二：使用componentDidUpdate监听状态变化 #

如果你希望把状态判断和状态更新的逻辑分开，可以用componentDidUpdate生命周期方法，监听credits的变化：

componentDidUpdate(prevProps, prevState) {
  // 当credits从4变为5，且还没开启新选项时
  if (this.state.credits === 5 && prevState.credits !== 5 && !this.state.newOptionDirty) {
    this.setState({ newOptionDirty: true });
  }
}

// 同样简化renderNewOption为纯函数
renderNewOption() {
  return this.state.newOptionDirty ? (
    <div>
      <Button> Add new feature </Button>
    </div>
  ) : (
    <div>no options until 5 credits</div>
  );
}

这两种方案都能解决你的警告问题，同时符合React的最佳实践——让render保持纯净，状态更新发生在合适的生命周期阶段。

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