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

时间:2019-05-29 22:34:28

标签: reactjs axios react-hooks

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

在我的代码中,我使用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中真正的内容。那么,你们以这种方式做过什么吗?在那种情况下最好的解决方案是什么?

1 个答案:

答案 0 :(得分:1)

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

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

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

所以回答您的问题

  

你们以这种方式做了什么吗?是的!

     

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

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