如何在 React 组件中重新加载数据以显示刚刚添加的新数据？答案

【问题标题】：How do I get data to reload in a React component to show the new data that was just added?如何在 React 组件中重新加载数据以显示刚刚添加的新数据？
【发布时间】：2022-01-02 17:50:26
【问题描述】：

我的网站上有一个如下所示的待办事项列表：

Todo list

当我单击加号按钮时，会出现一个输入，我可以添加一个项目，将项目添加到数据库中。问题是，虽然它确实将项目添加到数据库中，但在页面刷新之前它不会显示在网页上。这是添加按钮：


<div>
    <input
        type="text"
        onChange={(e) => setItem(e.target.value)}
    />
    <button onClick={() => itemHandler()}>
        Add
    </button>
</div>

itemHandler 函数只是用新的待办事项更新数据库：


async function itemHandler() {
    setAddItem(false)
    const res = await fetch('/api/add-todo-item', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            user_id,
            item
        }),
    })
    const json = await res.json()
    if (!res.ok) throw Error(json.message)
    setItem("")
}

但是当这个函数运行时，数据库会更新，但新项目在页面刷新之前不会显示在网站中。

待办事项最初作为参数传递到功能组件中：

function ToDoList( {user_id, todo_items} ) { ...

那么有没有办法刷新组件，同时在 itemHandler 将它们添加到数据库后将更新版本的项目从数据库传递给组件？

【问题讨论】：

标签： javascript mysql reactjs

【解决方案1】：

请检查回复，

我假设您在该请求的响应中收到了更新的待办事项。

这意味着您可以轻松地将新的待办事项（旧的待办事项，包括您刚刚添加的新待办事项）存储在您的应用程序状态中，遍历它们并渲染它们:)

PS：如果您在 POST 请求响应中没有收到它们，您可以在 POST 请求后立即发送 GET 请求以获取所有待办事项。

【讨论】：

我没有在请求的响应中获得更新的待办事项，而是在 POST 完美运行后立即发出 GET 请求！非常感谢！

【解决方案2】：

添加try{...}catch(error){...} 到您的应用中，

也使用钩子'useState' 比如const [data,setData] = useState([]);

并在try 中更新它，以便您在页面中看到它。

【讨论】：

感谢您的回复。我最终使用了另一个答案，但我相信这也会奏效！