从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

shouldComponentUpdate用于确定组件是否应该更新.做以下事情:

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

componentWillReceiveProps用于响应外部(道具)更改.componentWillReceiveState正如文档中所指出的那样,没有相应的东西.您的组件(以及您的组件)通常通过以下一个或多个事件触发它自己的状态更改:

• 初始渲染 getInitialState
• 更新的道具 componentWillReceiveProps
• <input>字段等中的用户交互,例如onChangeInput()组件中的自定义函数.
• in flux:响应来自侦听器的商店更改,通常在自定义函数调用中getStateFromStores(),更新状态.

我想在组件内部创建状态更改中的一个函数,然后在更新状态之前在同一组件内部进行干预是没有意义的.

在您的情况下,您可以将逻辑(以确定是否需要更新状态)移动到getStateFromStores()处理商店更新的函数.
或者,您可以简单地将其置于状态,并更改渲染功能,以便在计数器> 4时呈现不同的渲染.

Answer 2

不,请componentWillReceiveProps改用.它有相同的签名,shouldComponentUpdate你可以安全地打电话给this.setState那里.