React Custom Hook 不触发 DOM 更新

Question

这是一个重现我的问题的沙盒：

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

由于我无法理解的原因，当我通过表单添加产品时，产品列表只更新一次，然后再也没有。

我使用自定义钩子 (useObservable) 与 RxJS 结合来管理状态。如果您检查控制台日志，ReplaySubject 确实 会发出预期值。但是useObservable 钩子并没有触发 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);
};