时间戳

首页 > 解决方案 > 尝试构建删除功能，出错了

javascript - 尝试构建删除功能，出错了

问题描述

我正在尝试为我的天气应用程序构建一个删除功能，该功能仅适用于我通过 MAP 循环尝试的数组中的最后一个位置，但出现太多渲染错误。

这是我项目的沙盒 URL - https://codesandbox.io/s/kind-platform-cymzx?fontsize=14&hidenavigation=1&theme=dark

如果 ts 处理最后一个，我不明白，为什么你不处理第一个？（使用 for 循环它让我只编辑最后一个，在地图循环中，它说渲染太多）

伙计们，我坚持了 3 天，请帮忙。

标签： javascriptreactjs

解决方案

这是您的功能：

let deleteFunc = (name) => {
  allFavorite.map((item, index) => {
    console.log(item.name);
    let updatedFavorite = allFavorite.filter((item, i) => (item.name = name));
    setAllFavorite(updatedFavorite);
  });
};

第一个问题是您item.name在过滤器功能中发生了变异。第二个问题是您在地图内设置状态，因此您setAllFavorite调用allFavorite.

您的目标是先构建新状态，然后一次性应用它，如下所示：

let deleteFunc = (name) => {
  // this will return new array where item with name `name` removed, and will pass it into state setter
  setAllFavorite(allFavorite.filter((item) => item.name !== name));
};

推荐阅读