Javascript 如何从React中的状态删除项目

我正在尝试使用fetch从我的MERN stack应用程序中删除项目，并且已成功删除数据库中的项目。但是，当我单击“删除”按钮时，我无法理解如何从状态中删除该项。我正在使用项groupID的ID从数据库中删除，并且我正在尝试使用它从状态中删除。现在单击按钮时，项目将删除，但在重新加载页面之前不会消失。这是我的密码：

const [value, setValue] = useState("");


const [groupsState, setGroups] = useState({});
  const [loading, setLoading] = useState(true);
  const { isDarkMode } = useContext(ThemeContext);
  const { token } = useContext(LoggedInContext);


const handleClick = (groupId) => {
    function removeGroup(groupId) {
      setGroups(groupsState.filter(el => el !== groupId));
    }
    fetch("http://localhost:8181/groups/" + groupId, {
      headers: {
        "Content-Type": "application/json",
        Token: token
      },
      method: "DELETE"
    })
      .then((res) => {
        return res.json();
      })
      .then((data) => {
      console.log(data.data)
      removeGroup(groupId);
      })



};

---

如果要在JavaScript中删除它，只需在过滤器中指定id键即可

setGroupsgroupsState.filterel=>el.id！==groupId；

---

这是假设它被称为id，否则只需将其更改为您的id键。

如果您打算在JavaScript中删除它，您只需在过滤器中指定id键即可

setGroupsgroupsState.filterel=>el.id！==groupId；

---

这是假设它被称为id，否则只需将其更改为您的id密钥。

最可靠的方法就是重新读取数据。例如，如果API出错怎么办？@Brianthonpson可靠，可能有效？现在，您的groupState数据看起来像什么？您有groupsState.filterel=>el！==groupId，其中您将每个组状态本身与groupId进行比较。也许您应该访问每个组状态中的id或其他内容？也就是说，类似这样的东西：groupsState.filterl=>el.id！==groupId@klaurtar1groupsState是什么样子的？最可靠的方法就是重新读取数据。例如，如果API出错怎么办？@Brianthonpson可靠，可能有效？现在，您的groupState数据看起来像什么？您有groupsState.filterel=>el！==groupId，其中您将每个组状态本身与groupId进行比较。也许您应该访问每个组状态中的id或其他内容？也就是说，类似这样的东西：groupsState.filterl=>el.id！==groupId@klaurtar1groupsState是什么样子的？图中是一样的，虽然初始状态是一个对象，可能暗示一个映射。这是真的。一开始我没有注意到。我假设他们以后会改变数据类型，或者他们会问一个关于过滤器不是函数的问题，但这只是一个假设。结果是el.\u id，但它可以工作。但是，将函数放在handleClick中是否是最佳选择？？这可以通过使用setGroups的函数版本来改进，它可以防止基于过时数据设置状态。setGroupsgroups=>groups.filterel=>el.id！==GroupIdConfiguration是相同的，尽管初始状态是一个对象，它可能表示一个映射。这是真的。一开始我没有注意到。我假设他们以后会改变数据类型，或者他们会问一个关于过滤器不是函数的问题，但这只是一个假设。结果是el.\u id，但它可以工作。但是，将函数放在handleClick中是否是最佳选择？？这可以通过使用setGroups的函数版本来改进，它可以防止基于过时数据设置状态。setGroupsgroups=>groups.filterel=>el.id！==groupId