删除或添加行时，如何使用 React Hooks 刷新表？

IT技术 reactjs axios react-hooks
2021-05-06 11:54:58

我有一个显示一些游戏数据的 react-table 组件。

该组件使用钩子来设置状态，如下所示：

const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, []);

在我的表中，我有一个按钮，可以通过对 api 的 Put 请求添加或删除行。

我希望它在不进行完整/可见页面刷新的情况下删除该行。

这是执行 axios put 请求的代码。

您可以看到我正在尝试再次使用“setData”来“刷新”数据。

但这不起作用。现在它确实删除了该行，但我只能在按 f5 或按浏览器刷新按钮后才能看到。

const updateGame = async (game, action) => {
    await new Promise(resolve => setTimeout(resolve, 500));

    game.isApproved = action;
    axios({
        method: "PUT",
        url: "api/games/" + game.id,
        data: JSON.stringify(game),
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
    });
    // trying to refresh table after the axios Put request
    setData(data);
};

有没有办法动态刷新状态而不必点击刷新？

谢谢！

2个回答

您必须让效果知道您希望它何时运行。空括号基本上就像使用 onMount 一样，因此通过将数据添加到它会在数据更改时刷新。

const [data, setData] = React.useState([]);
React.useEffect(() => {
    gameData(false).then(res => {
        setData(res.data);
    });
}, [data]);

setData(data);

这只是设置您已有的数据，因为data变量没有改变。

您的意思是设置 PUT 请求返回的新数据吗？如果是这样你需要await请求，然后设置新的状态。

你可能想要这样的东西：

const newData = await axios({
    method: "PUT",
    url: "api/games/" + game.id,
    data: JSON.stringify(game),
    headers: { 'Content-Type': 'application/json; charset=utf-8' }
});
setData(newData);
其它你可能感兴趣的问题
上一篇使用密码浏览屏幕 下一篇失败的props类型：提供给“ButtonBase”的“object”类型的无效props“onClick”，预期为“function”