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);
};

React Custom Hook 未触发 DOM 更新

React Custom Hook not triggering DOM updates

javascript

rxjs

reactjs

react-hooks