客户挂钩中的使用Reducer不会更新UI

Question

我想使用 useReducer 来实现一个自定义钩子，比如官方文档中提到的 useLegacyState，以灵活地更新组件中的状态。

https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

只能使用 useState 或 useReducer 来实现：

https://codesandbox.io/embed/usereducer-update-any-05v82

但是，我无法使用自定义钩子更新 UI：

https://codesandbox.io/embed/customer-usestates-xxn01

为什么？

Answer 1

您需要更新化简器函数：

function reducer(state, action) {
  return Object.assign({}, state, action);
}

原因是当你做Object.assign(state, action)时，state也会用action的属性进行更新，这导致React无法从更新的state中伪装原始state，因此应该组件更新返回false，因为状态和更新的状态是相同的。