javascript - React 自定义 Hook 不触发 DOM 更新

Question

这是一个重现我的问题的沙箱:

https://codesandbox.io/s/ymmyr3o70x?expanddevtools=1&fontsize=14&hidenavigation=1

出于我无法理解的原因，当我通过表单添加产品时，产品列表仅更新一次，然后就不会再更新。

我使用自定义 Hook (useObservable) 与 RxJS 结合来管理状态。如果您检查控制台日志，ReplaySubject 确实会发出预期值。但是 useObservable 钩子(Hook)没有触发 DOM 更新。

我错过了什么？

Answer 1

问题在于您的 addProduct 函数会改变旧状态，而不是创建新状态。是的，您让 observable 再次发出状态，但由于它与之前是同一对象，因此调用 setValue 没有效果，因此 React 不会重新渲染。

解决这个问题的方法是使状态不可变。例如:

import { ReplaySubject } from "rxjs";

let products = {};

export const products$ = new ReplaySubject(1);

export const addProduct = product => {
  products = {...products, [product]: product};
  products$.next(products);
};