Javascript 在react钩子中删除后未刷新数据

删除记录后，播放机数据仍显示在主屏幕中，且不会刷新。只有在导航到其他屏幕后，我才能在主屏幕中看到更新的数据

我尝试将

setSearchResults（searchResults）

状态放入

onDelete（）

中，但它不起作用

Home.js

app.delete('/service/player', async (req, res) => {
  try {
    const userId = req.body.id;
    console.log("Req"+userId);
    const deletePlayer = await UserModel.destroy({
      where:{ id : userId }
    })
    res.status(200).json({ deletePlayer });
    } catch (e) {
    res.status(500).json({ fail: e.message });
   }
});

以下是在主屏幕中显示播放器数据的获取方法：

 const [playerList, setPlayerList] = useState([]);
    const [searchResults, setSearchResults] = useState([]);

    useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await Axios.get('http://localhost:8000/service/players');
        if (isMounted.current) {
        setPlayerList(res.data.players);
        setSearchResults(res.data.players);
        const privilege = localStorage.getItem('Privilege');
        console.log("What is getting in Front End:" + privilege);
        showDeleteIcon(privilege);
        }
      } catch (e) {
        console.log(e);
      }
    }
    fetchData();
  }, []);


    const onDelete = id => () => {
        try {
          Axios.delete('http://localhost:8000/service/player', {
          headers: {
            'Content-Type': 'application/json'
            },
          data: {
            'id' : id
          }
        });
          setDeleteDialog(false);
          //setSearchResults(searchResults);
          //setPlayerList(playerList);
        } catch (e) {
          console.log(e);
        }
      }

server.js

app.delete('/service/player', async (req, res) => {
  try {
    const userId = req.body.id;
    console.log("Req"+userId);
    const deletePlayer = await UserModel.destroy({
      where:{ id : userId }
    })
    res.status(200).json({ deletePlayer });
    } catch (e) {
    res.status(500).json({ fail: e.message });
   }
});

---

假设删除的记录实际上是

searchResults

状态的一部分，该状态定义为

Home.js

组件的一部分，则需要在

Axios.delete

请求成功后更新状态。这可以通过过滤（使用

Array.filter

）与

id

不匹配的其他结果来实现

我不确定

searchResults

的确切结构，但我假设

id

（传递到

onDelete

方法的参数）是

searchResults

数组中每个对象的唯一属性之一

const onDelete = id => () => {
    try {
      Axios.delete('http://localhost:8000/service/player', {
      headers: {
        'Content-Type': 'application/json'
        },
      data: {
        'id' : id
      }
    });
      setDeleteDialog(false);

      const remainingResults = searchResults.filter((result) => result.id !== id)
      setSearchResults(remainingResults);
    } catch (e) {
      console.log(e);
    }
  }

---

“记录”是

searchResults

状态的一部分吗？如果您将状态挂钩更新为与当前状态相同的值，React将退出，而不会渲染子项或激发效果，因此您需要使用一组新数据设置searchResults，该数据不包含已删除的记录，谢谢。对答案投了赞成票。古玩知道页面导航怎么会显示更新的数据吗？嗯。。我猜这是因为当您导航回这个组件时，它将使用更新的数据重新呈现，因为您实际上是在那个useffect（）钩子上获取数据