Question

为了提高可读性，我将在示例中删除很多功能。但是，本质上，我有一个useEffect（如下所示），它具有一个跟踪state.cards卡对象数组的依赖项。我的假设是，如果state.cards属性发生变化，那么useEffect应该触发。但是，事实并非如此。

下面是两个正在使用的解决方案。我想使用第一个，因为它处于固定时间。第二个虽然很好，但是是线性的。令我感到困惑的是，为什么第二个选项触发了依赖性，而第一个却没有触发。两者都返回正确修改状态的克隆。

此不会触发useEffect依赖项state.cards。

      const newArr = { ...state };
      const matchingCard = newArr.cards[action.payload];   <-- payload = number
      matchingCard.correct += 1;
      matchingCard.lastPass = true;
      return newArr;

此做会触发useEffect依赖项state.cards。

      const newArr = { ...state };
      const cards = newArr.cards.map((card) => {
        if (card.id === action.payload.id) {
          card.correct += 1;
          card.lastPass = true;
        }
        return card;
      });
      return { ...newArr, cards };

useEffect

  useEffect(() => {
    const passedCards = state.cards.filter((card) => {
      return card.lastPass;
    });
    setLearnedCards(passedCards);
    const calculatePercent = () => {
      return (learnedCards.length / state.cards.length) * 100;
    };
    dispatch({ type: 'SET_PERCENT_COMPLETE', payload: calculatePercent() });
  }, [learnedCards.length, state.cards]);

州

const initialState = {
  cards: [],  <-- each card will be an object
  percentComplete: 0,
  lessonComplete: false,
};

解决方案：使用第一个示例的可行解决方案：

      const newCardsArray = [...state.cards];
      const matchingCard = newCardsArray[action.payload];
      matchingCard.correct += 1;
      matchingCard.lastPass = true;
      return { ...state, cards: newCardsArray };

为什么：展开数组state.cards会创建该数组的新浅表副本。然后，我可以对该克隆数组进行修改，并将其作为分配给state.cards的新值返回。扩展数组具有一个新引用，并由useEffect检测。

Answer 1

我的最佳猜测是，在第二个工作示例中，.map返回具有新引用的新数组。在第一个示例中，您只是在更改数组的内容，而不是对该数组的引用。

我不确定useEffect的比较方式，但是如果我正确地记住一个对象，那就仅仅是对该对象的引用。这有时使在对象上使用useEffect变得困难。数组也可能相同。

为什么不尝试：

const newCardsArray = [...state.cards]
// do your mutations here

应该像处理对象一样使用新的引用复制数组。

React钩子：useEffect不会在对象数组上触发

1 个答案: