开发者问题收集

反应钩子中删除后数据未刷新

2020-06-05
1825

删除记录后,玩家数据仍显示在主屏幕中,并且未刷新。 只有在导航到其他屏幕后,我才能在主屏幕中看到更新的数据。

我尝试将 setSearchResults(searchResults) 状态放在 onDelete() 中,但它不起作用。

Home.js

以下是在主屏幕中显示玩家数据的获取方法:

 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 });
   }
});
1个回答

假设删除的记录实际上是 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);
    }
  }
wentjun
2020-06-05