客户挂钩中的useReducer不会更新UI

Question

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

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

只能实现useuseState或useReducer：

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

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

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

为什么？

Answer 1

您需要更新reducer功能：

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

原因是 当您执行Object.assign(state, action)时，state也会使用action的属性进行更新，这导致React无法从更新后的state掩盖原始state，由于状态和更新后的状态相同，因此shouldComponentUpdate返回false。