这是一个重现我的问题的沙箱:
https://codesandbox.io/s/ymmyr3o70x?expanddevtools=1&fontsize=14&hidenavigation=1
出于我无法理解的原因,当我通过表单添加产品时,产品列表仅更新一次,然后就不会再更新。
我使用自定义 Hook (useObservable
) 与 RxJS 结合来管理状态。如果您检查控制台日志,ReplaySubject
确实会发出预期值。但是 useObservable
钩子(Hook)没有触发 DOM 更新。
我错过了什么?
最佳答案
问题在于您的 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);
};
关于javascript - React 自定义 Hook 不触发 DOM 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54960439/