当依赖项更改时，React useEffect hook 不会触发答案

【问题标题】：React useEffect hook doesn't trigger when a dependency changes当依赖项更改时，React useEffect hook 不会触发
【发布时间】：2021-02-18 08:45:49
【问题描述】：

我有这个 useEffect 钩子

useEffect(() => {
    console.log('mark useEffect', compatibleProducts);
    if (Object.keys(compatibleProducts.rims).length === 0
            && Object.keys(compatibleProducts.tires).length === 0) return;

}, [compatibleProducts,...]);

正如您在图片中看到的那样，最后一行 (COMPATIBLE_PRODUCTS) 的状态发生了变化。在我检查的状态下，确实添加了值，但 useEffect 钩子不会再次触发。

有什么理由这样做？

之前状态：之后状态：

减速器作用：

【问题讨论】：

这是 redux 吗？你能告诉我们你改变状态的reducer吗？您看到操作正在运行这一事实并不意味着您正在返回一个新状态（改变当前状态是错误的）。
@keul 我已经编辑了我的问题
您的数组“compatibleProducts”的对象标识保持不变。您可以复制内容compatibleProducts: [...action.compatibleProducts] 或将其传播到deps 数组useEffect(() => {}, [...compatibleProducts]
@Martin 很好的答案，但您的意思不是以下内容：useEffect(() => {}, [{...compatibleProducts}] 因为useEffect(() => {}, [...compatibleProducts] 给了我错误Type 'CompatibleProductsInterface' must have a '[Symbol.iterator]()' method that returns an iterator.。即便如此，它仍然不起作用

标签： reactjs

【解决方案1】：

你应该试试在减速机中

case TYPE.COMPATIBLE_PRODUCTS.SUCCESS:
            return {
                ...state,
                compatibleProducts: {
                    ...state.compatibleProducts,
                    ...action.compatibleProducts,
                    timespan: + new Date()
                }
            }

在你的组件中

useEffect(() => {
    ...
}, [compatibleProducts.timespan]);

【讨论】：