javascript - 在 React 中切换添加到收藏夹的按钮颜色

Question

我正在显示项目列表，用户可以将项目添加到他们的收藏夹。

我的问题是，我只捕获一种最喜欢的状态，因此，单击一个按钮后，所有项目按钮(下面的红心)都会改变颜色。

我正在尝试找到最好的方法来处理最喜欢的项目的切换。

这是按钮代码和相应的点击处理程序:

<Table.Cell textAlign="center">
                    <Button
                      onClick={() => addFavorite(card, props.loggedUser)}
                      bordered
                      color={favorite ? "google plus" : "twitter"}
                      icon={favorite ? "heart" : "heart outline"}
                    />
                  </Table.Cell>

 const addFavorite = (card, user) => {
    console.log("CARD + USER ON CLICK", card, user);
    props.updateUser(card, user);
    setFavorite(!favorite);
  };

单击后，我将最喜欢的内容发送到数据库中用户最喜欢的数组，并且此操作成功。 (尽管我还没有处理任何删除)。

我还设置了状态，如上面的 setFavorite 调用所示，但这只是跟踪一个通用的“最喜欢”状态，而不是每个项目的最喜欢状态。

const [favorite, setFavorite] = useState("false");

执行此操作的最佳方法是什么？我应该添加一个包含所有收藏夹的状态吗？

我确实有一个名为loggingUser的可用存储/状态，其中包含用户的所有信息和最喜欢的项目。我应该对此进行检查吗？

感谢您对此提供的任何帮助。

Answer 1

嗯，正如您在上面的答案中提到的，为了即使刷新页面也能保留数据，您应该将最喜欢的数组保存在本地存储中。

const [favorites, setFavorite] = useState("");

useEffect(async ()=>{
  let savedFavorite = await localStorage.getItem('__Fav');
  if(savedFavorite) {
    setFavorite(savedFavorite);
  }
}, [])

在 addFavoirte 中，您可以检查单击的项是否已在收藏夹数组中。如果它在那里，您可以将其删除并将新的收藏夹数组保存到本地存储。如果它不在最喜欢的数组中，您可以将其推送并再次将新数组保存到本地存储中。

现在，如果您重新加载页面，useEffect 将获取 savingFavorite 数组并将其添加到组件中的 favorite 数组中。