从异步函数获取数据并更新状态

Question

我使用 useState 创建了一个变量，它是一个空数组。

const [data, setData] = useState([]);

我在 useEffect 中调用一个异步函数，它帮助我获取所有数据并在接收到数据时更新数据

useEffect(() => {
    //
    const items = [];
    async function fetchData() {
      items = await getAllItems();   //it should wait for data and then setData
      setData(items);    
    }
    fetchData();
    console.log("from useEffect", items);  // still items array is empty
  }, []);

这是我导入的数据检索函数，它使用 Axios 和 returns 数据：

export const getAllItems = async () => {
  const url = baseUrl + "/items/getAllItems";
  await axios({
    method: "GET",
    withCredentials: true,
    url: url,
  }).then((res) => {
    return res;  // when console logged we get a proper array if data
  });
};

但是没有任何效果，我得到的只是 object of promise。谁能指导我在代码中遗漏了什么？

Answer 1

您没有 return 来自 axios 调用的数据。

export const getAllItems = async () => {
  const url = baseUrl + "/items/getAllItems";
  const { data } = await axios({
    method: "GET",
    withCredentials: true,
    url: url,
  });
  return data;
};

Answer 2

您的 console.log() 位置错误 (2)。应该在标有（1）的位置代替。请查看我添加的评论：

useEffect(() => {
    const items = [];
    async function fetchData() {
      items = await getAllItems();   //it should wait for data and then setData
      setData(items);
      // (1) you chould console.log() the items array here instead
      // if the data is properly returned from getAllItems() it will be visible here
      console.log("from useEffect", items);
    }
    fetchData();
    console.log("from useEffect", items);  // (2) items array will be empty here right after fetchData() as getAllItems() has not returned yet.
  }, []);

Answer 3

您正在将 getAllItems() 的值赋给已在此处声明的常量变量 items:

const items = [];

但是，根据 mdn web docs：

The value of a constant can't be changed through reassignment (i.e. by using the assignment operator), and it can't be redeclared (i.e. through a variable declaration).

因此您需要使用 let 初始化该变量，或者更好的是立即分配它，如下所示：

const items = await getAllItems();

然后你可以去掉 const items = [];

Answer 4

useEffect(() => {
   let isMounted = true 
   function fetchData() {
      const items = axios.get(baseUrl + "/items/getAllItems")
      if (isMounted) setData(items);    
   }
   fetchData();
   return () => {isMounted = false}
}, []);

从异步函数获取数据并更新状态

Get data from async function and update state

reactjs

axios

react-hooks

use-state