从 shouldComponentUpdate 中调用 setState 可以吗？

Question

为了响应状态变化，我想触发另一个状态变化。这本质上是个坏主意吗？

具体的一种场景是将组件建模为状态机，根据this.state.current_state的值渲染不同的信息。但是外部事件可以促使它经历状态转换，通过通量存储改变它的状态。这是一个人为的场景来理解这个想法：

我认为正确的生命周期方法是 shouldComponentUpdate。达到这个效果：

shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.counter > 4 && this.state.current_state !== DISPLAY_MANY) {
        this.setState({ current_state: DISPLAY_MANY });
    }
    return true;
}

在某些子组件中，counter 可能会递增，因此我不想根据某些 counter 变量的值来推断它将显示什么，而是想对状态进行显式编码。

真实场景比这更复杂，但希望这个场景足够详细，可以理解这个想法。按照我的想法做可以吗？

编辑：固定代码示例以避免通过添加额外的状态条件触发无限循环

Answer 1

没有。请改用 componentWillReceiveProps。它具有与 shouldComponentUpdate 相同的签名，您可以安全地在那里调用 this.setState。

Answer 2

shouldComponentUpdate 专门用于确定组件是否应该更新。做这样的事情：

if (nextState.counter == this.state.counter && nextProps.foo == this.Props.foo) {
  return false;
}

componentWillReceiveProps 用于响应外部（道具）变化。正如文档中指出的那样，没有等效的 componentWillReceiveState。您的组件（并且只有您的组件）触发它自己的状态更改，通常是通过以下一个或多个事件：

getInitialState
更新了 componentWillReceiveProps
<input> 字段等中的用户交互，例如在组件的自定义 onChangeInput() 函数中。
不断变化：响应来自侦听器的存储更改，通常在调用 getStateFromStores() 的自定义函数中，更新状态。

我想在一个组件中有一个函数来创建状态变化，然后在同一组件中有另一个函数在状态更新之前进行干预是没有意义的..

在您的情况下，您可以将逻辑（以确定是否需要更新状态）移动到处理商店更新的 getStateFromStores() 函数。
或者，您可以简单地将其保留在状态中，并更改渲染函数，以便在 counter > 4 时呈现不同的效果。

从 shouldComponentUpdate 中调用 setState 可以吗？

Is it OK to call setState from within shouldComponentUpdate?

flux

reactjs

reactjs-flux