React自定义钩子不触发DOM更新

Question

这是一个再现我问题的沙箱：

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

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

我正在使用结合RxJS的自定义挂钩（useObservable）来管理状态。如果您检查控制台日志，则ReplaySubject确实会发出期望的值。但是useObservable钩子不会触发DOM的更新。

我想念什么？

Answer 1

问题是您的addProduct函数会更改旧状态，而不是创建新状态。是的，您可以再次观察到可发射状态，但是由于它与以前相同，因此调用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);
};