Question

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

例如：

counter更改时，我需要对peopleArray进行更新
多个操作更改了counter（请参阅Dispatcher块）

状态：

{
  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

Reducer的（部分）：每次添加新人时 个计数器

if (action.type === 'ADD_PEOPLE') {
  let updatePeople = [...state.peopleArray]
  updatedPeople.push(action.payload.name)
  return {
    ...state,
    peopleArray: updatedPeople,
    counter: counter + 1
  }
}

基本上，我需要某种订阅者，这将允许我触发对peopleArray的更新，但是我不想最终陷入无限循环。

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

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

问题是，一旦我在componentWillUpdate中触发更新，peopleArray就会发生变化，从而使状态发生变化……这将重新渲染应用并再次调用componentWillUpdate。 ...输入无限循环：（

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

Answer 1

应该只能使用componentDidUpdate

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

componentWillUpdate已过时，出于您描述的原因，{p3}更改了其中的状态。但是，componentDidUpdate可以更改状态：

您可以立即在componentDidUpdate（）中调用setState（），但请注意，必须将其包装在如上例中所示的条件下，否则会导致无限循环。这也将导致额外的重新渲染，这虽然对用户不可见，但会影响组件的性能。

completely not advised

在这一点上，我不相信这种实现会导致无限循环。如果OP从componentDidUpdate()内的条件内部进行了console.log测试，则不应触发不必要的状态更改。

Answer 2

您需要重新考虑您的设计。动作是唯一应更新Redux状态的内容，因此，如果ADD_PEOPLE除了需要添加人员以外还需要更新计数器，则该动作也应这样做（如您所述）。

相反，可能有一个名为INCREASE_COUNTER的动作也需要增加人员。

在componentWillUpdate中触发动作的设计不佳，我强烈建议您不要尝试类似的事情。

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

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

2 个答案: