reactjs - React Hook useEffect 用于获取和发布到后端(API)？

Question

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

在我的代码中，我(使用 Axios)获取后端中的数据(带有对象的简单列表)。为此，我使用了带有 useEffect 的新 React hooks，效果非常好:

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

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

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.

话虽如此，如果您希望多个用户同时更新列表，那么您将需要在页面刷新之前同步列表。