Reactjs React Redux-根据状态属性更改更新状态

每次其他属性更改时，我都需要对状态属性进行更改

例如：

• 当

  计数器

  发生变化时，我需要更新

  人物数组

• 多动作更改计数器（参见调度程序块）

声明：

{
  peopleArray: ['Shawn', 'Amanda', 'Jermaine']
  foodArray: []
  counter: 0
}

调度员：

onAddPeople: (name) => ({ type: 'ADD_PEOPLE', payload: name }) // increments counter
onAddFood: (type) => ({ type: 'ADD_FOOD', payload: type }) // increments counter

减速机的（部分）：每次添加新人员时，计数器都会递增

基本上，我想要某种订户，这将允许我触发对

peopleArray

的更新，但我不想以无限循环结束

我在PeopleComponent.js文件中尝试了以下操作：

componentWillUpdate(nextProps: any) {
    if (this.props.counter !== nextProps.counter) {
        // Trigger update to peopleArray
    }
}

问题是，一旦我在

组件willupdate

中触发更新，

peopleArray

就会改变，这使得状态改变。。。重新呈现应用程序并调用组件将再次更新。。。。进入无限循环：(

---

如何“正确”执行此操作？

应该能够使用

componentdiddupdate

componentDidUpdate(prevProps) {
    if (prevProps.counter !== this.props.counter) {
        // update component state accordingly
    }
}

componentWillUpdate

已弃用，将根据您描述的原因更改其中的状态。但是，

componentdiddupdate

可以安全地更改状态：

您可以在componentDidUpdate（）中立即调用setState（），但请注意，必须将其包装在类似于上述示例的条件中，否则将导致无限循环。这还将导致额外的重新呈现，虽然用户看不到，但会影响组件性能

---

我现在不相信这个实现会导致无限循环不应该触发不必要的状态更改。

您需要重新考虑您的设计。操作是唯一应该更新redux状态的事情，因此如果ADD_PEOPLE除了添加人员之外还需要更新计数器，那么该操作应该这样做（如您所述）

相反，可能会有一个名为“增加计数器”的操作，它还需要添加人员

componentWillUpdate

中的触发操作设计糟糕，我强烈建议不要尝试类似的操作

---

原因是Redux不仅仅是一个事件框架。操作严格保留为应用程序和外部数据源之间的外部交互（最常见的是用户交互和对服务器的请求）.

那么，当计数器增加时，您希望更新人员数组，反之亦然？是的，我希望在计数器增加时更新人员数组每一次“发生了什么事”，计数增加。这意味着，添加人员、添加食物、删除人员、删除食物等。这就是为什么

计数器

是它自己的状态属性。当状态属性更改时，react-redux是否没有简单的方法来做某事？react背后的基本原理是它使用单向数据流，在这种情况下：action->redux->react components。如果您希望在调度操作时执行某些操作，请在redux中执行。单词“state property”不清楚-您是指连接到redux的react prop吗？

componentDidUpdate(prevProps) {
    if (prevProps.counter !== this.props.counter) {
        // update component state accordingly
    }
}