主页 / coding / 问题 / 78602905
Accepted
Tony
Asked: 2024-06-10 22:29:54 +0800 CST

如何防止使用 Redux 向数组添加重复值？

  • 772

我希望用户点击列表中的某个项目并将其添加到他们的收藏夹页面。我遇到的问题是，如果用户点击同一个项目两次，它将被添加到他们的收藏夹页面两次，并产生问题，因为两个孩子拥有相同的密钥。

我在 Reducer 中用这种方式更新状态：

const initialState = {
  selectedFavorites: [],
};

addFavorite: (state, action) => {
  return {
    ...state,
    selectedFavorites: [...state.selectedFavorites, action.payload],
  };
},

当用户点击要添加到收藏夹的项目时：

const handlePress = () => {
  favorite === true ? setFavorite(false) : setFavorite(true);

  dispatch(
    addFavorite({
      id: currentIndex,
      title: getIds[currentIndex].title,
      liked: 'true',
    }),
  );
  setTimeout(() => {
    setFavorite(false);
  }, 500);
};

我尝试过new Set()但无法使其工作。有什么好方法可以复制和呈现状态而不产生任何重复值？

javascript

3 个回答

  1. 我不会在减速器中修复此问题，而是在 之前修复它dispatch，例如，检查它是否已经是最喜欢的。

    假设ids包含所有收藏索引的列表，用于includes检查该 ID 是否已存在于数组中

    if (ids.includes(currentIndex)) {
   // Show warning that this is already a fav, for example:
   setWarning("You've already added this to your favorites!");
} else {
    dispatch(
      addFavorite({
        id: currentIndex,
        title: getIds[currentIndex].title,
        liked: 'true',
      }),
    );
}
    • 1
  2. Best Answer

    在addFavoriteReducer 函数中检查selectedFavorites数组是否已经包含具有匹配 id 值的元素，如果是，则仅添加新的收藏夹。

    例子：

    addFavorite: (state, action) => {
  // Check if favorites already includes the item
  if (state.selectedFavorites.some(el => el.id === action.payload.id)) {
    return state;
  }

  // Not included, add to favorites
  return {
    ...state,
    selectedFavorites: [...state.selectedFavorites, action.payload],
  };
},

    或者，您似乎可以在处理程序中修复此问题，因为您似乎还保留并维护了本地favorite状态。

    例子：

    const handlePress = () => {
  // Toggle favorite state
  setFavorite(favorite => !favorite);;

  // If not already favorited, dispatch action and timeout
  if (!favorite) {
    dispatch(
      addFavorite({
        id: currentIndex,
        title: getIds[currentIndex].title,
        liked: 'true',
      }),
    );
    setTimeout(() => {
      setFavorite(false);
    }, 500);
  }
};
    • 1

  3. 如果您想要的只是过滤列表中的不同值，则此解决方案由@TLindig 编写。

    但您也可以在调用调度之前检查该项目是否已被收藏：

    if(isFavorited(currentIndex))
    return;
dispatch(
        addFavorite({
        id: currentIndex,
        title: getIds[currentIndex].title,
        liked: 'true',
    }),
);
setTimeout(() => {
    setFavorite(false);
    }, 500);
};
    • 0

相关问题