如何在React中从状态中删除项目

Question

我正在尝试使用fetch从我的MERN堆栈应用中删除项目，并且我已经成功删除了数据库中的项目。但是，当我单击删除按钮时，我无法弄清楚如何从状态中删除项目。我正在使用该项目的ID（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);
      })



};

Answer 1

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

setGroups(groupsState.filter(el => el.id !== groupId));

那是假定它称为id，否则只需将其更改为您的id密钥即可。