Question

这是一个问题，您需要更多地了解大家通常如何将其作为问题来解决。我目前的代码没有问题，但是我不确定这是正确的方法。

在我的代码中，我使用Axios对后端中的数据（带有对象的简单列表）进行访存。为此，我将新的React钩子与useEffect一起使用，就像一个护身符：

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

但是我也有一个屏幕，其中显示了添加到Backend中的列表的过程。为此，我还要在Backend中使用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();
  }

那行得通，但是可以想象，有点“伪造”，因为在重新加载页面之前，数据不是Backend中真正的内容。那么，你们以这种方式做过什么吗？在那种情况下最好的解决方案是什么？

Answer 1

即使没有刷新问题，“伪造”更新列表也是一种惯例。这是因为您希望您的应用对用户而言看起来很快。如果后端请求需要5秒钟才能完成，然后更新屏幕，则用户将认为您的应用程序已损坏。

在聊天应用程序中，在实际发送之前先显示已发送的消息是非常普遍的。删除项目经常使用相同的概念。后端更新之前，该项目将从屏幕上删除，因此无需刷新。

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

所以回答您的问题

你们以这种方式做了什么吗？是的！

在那种情况下最好的解决方案是什么？如果该列表是针对单个用户的，那么您的解决方案就很棒。

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

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

1 个答案: