React Hook useEffect 用于获取和发布到后端（API）？

Question

这是一个更重要的问题，可以更多地了解你们通常是如何解决这个问题的。我目前对代码没有任何问题，但我不太确定这是正确的方法。

在我的代码中，我获取（使用 Axios）后端数据（一个包含对象的简单列表）。为此，我将新的 React hooks 与 useEffect 结合使用，效果非常好：

useEffect(() => {
    axios
      .get("http://localhost:5000/api/list")
      .then(result => {
        setExampleList(result.data);
      })
      .catch(error => console.log(error));
  }, [setExampleList]);

但我也有一个屏幕，其中显示了在后端添加到该列表的过程。为此，我也在后端使用 axios 处理表单提交。这就是“问题”。它可以工作并转到后端，但我的提取没有更新，因为它没有重新渲染或其他什么。然后我想到了调用 setData() 的想法，其中提取位于函数内部以添加新项目（发布后）：

function handleSubmit(event) {
    event.preventDefault();
    let obj = {
      name: name,
      city: city
    };
    axios
      .post("http://localhost:5000/api/add", obj)
      .then(response => {
        console.log(response.data);
        obj.id = response.data.inserted_id;
        setExampleList([...setExampleList, obj]);
      })
      .catch(error => {
        console.log(error);
      });
    handleCloseModal();
  }

这行得通，但正如您所想象的那样，有点“假”，因为在我重新加载页面之前，数据并不是后端中的真实数据。那么，你们这样做过吗？在这种情况下，最好的解决方案是什么？

Answer 1

即使您没有刷新问题，“假”更新列表也是一种常见的做法。这是因为您希望您的应用程序对用户来说看起来很快。如果后端请求需要 5 秒才能完成然后更新屏幕，用户会认为您的应用已损坏。

在聊天应用程序中，在消息实际发送之前显示消息已发送是非常常见的。同样的概念被大量用于删除项目。该项目会在后端更新之前立即从屏幕上删除，不需要刷新。

您可能想要添加一条 UI 消息，告诉用户提交是否失败，这样他们就不会刷新页面并想知道为什么列表缺少新项目。

所以回答你的问题

Have you guys done something in this way? Yep!

What would be the best solution in that case? If the list is for a single user then your solution is great.

也就是说，如果您希望多个用户同时更新列表，那么您需要在页面刷新之前同步列表。

React Hook useEffect 用于获取和发布到后端（API）？

React Hook useEffect for fetching and posting to Backend (API)?

reactjs

axios

react-hooks