从shouldComponentUpdate内调用setState可以吗？

小编典典

从shouldComponentUpdate内调用setState可以吗？

reactjs

响应状态更改，我想触发另一个状态更改。这天生是一个坏主意吗？

场景的特定种类是将该组件建模为状态机，该状态机根据的值呈现不同的信息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，我不想显式地对状态进行编码，而不是根据某个变量的值推断其显示的内容。

实际场景比这要复杂得多，但希望此场景足够详细，可以使您理解。做我想的可以吗？

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

阅读 941

2020-07-22

共1个答案

小编典典

shouldComponentUpdate专门用于确定组件是否应该完全更新。做类似的事情：

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

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

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

我想 在组件内部创建一个函数来创建状态更改，然后在状态更新之前先干预同一组件内部的另一个函数是没有意义的。

在您的情况下，您可以将逻辑（以确定状态是否需要更新）移至getStateFromStores()处理商店更新的功能。
或者，您可以简单地保持其状态，并更改渲染功能，以便在counter> 4时以不同的方式渲染。

2020-07-22