从 API 获取数据后打印变量为空，然后打印填充的值

Question

假设我在 React 中获取了一个 API，并在数据列表中设置了它的值

const [dataLists, setdataLists] = useState([])

const fetchAPI = () => {
        axios.get(`/api/fetchDetails/fetchData/${comp_id}`).then((data) => {

            setdataLists(data.data);
        }).catch(error => {
            console.log(error);

        })
    }

useEffect(() => {
        fetchAPI()
    }, [])

console.log(dataLists) # This prints first empty array and then the value is printed though I have 
                         called after data has been set.

我想在调用 fetchAPI 函数并设置值后打印数据非空数组。由于空数组，我使用 dataLists 执行的任何操作都会给出未定义的错误，因为在开始时它会得到空数组，之后只会得到值。

如果需要更多信息，请告诉我。

Answer 1

从您的代码中可以清楚地看出，您在 useEffect() 之外的组件内执行 console.log(dataLists)。

注意useEffect() 是在组件的JSX 被渲染之后调用的。因此，作为组件（本质上是一个函数），当它运行时，它会传递这行代码 console.log(dataLists)，并且由于您将 dataListsstate 变量设置为 empty array，它最初会输出一个空数组。

const [dataLists, setdataLists] = useState([]);

因此，您必须创建良好的代码结构。例如添加loading 状态和error 状态，并相应地处理 JSX。

使用以下结构会有所帮助：

import React, { useEffect, useState } from "react";

const url = "https://api.github.com/users/emmeiwhite";

// Conditional Renders
const FetchingAndShowing = () => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [user, setUser] = useState({});

  useEffect(() => {
    fetch(url)
      .then((response) => {
        if (response.status >= 200 && response.status < 300) {
          setLoading(false);
          return response.json();
        } else {
          throw new Error("Error: Could not fetch the data");
        }
      })
      .then((data) => {
        console.log(data);
        setUser({ ...user, ...data });
      })
      .catch((error) => {
        setError(true);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <h3>Loading ...</h3>;
  }

  if (error) {
    return <h3>Error in the API call itself ...</h3>;
  }

  return (
    <div>
      <div>
        <h1>Name: {user.login}</h1>
        <img src={user.avatar_url} />
      </div>
    </div>
  );
};
export default FetchingAndShowing;

Answer 2

 const fetchAPI =async () => {
     await   axios.get(`/api/fetchDetails/fetchData/${comp_id}`).then((data) => {

            setdataLists(data.data);
            console.log(data.data); #They both will work
            console.log(dataLists); #They both will work
        }).catch(error => {
            console.log(error);

        })
    }

并在打印数据列表之前应用条件，例如：

{dataLists &&  dataLists.length !=0 ? ///The codes you want to use :[]}

Answer 3

看到您的问题，您在异步函数之外调用了 log 方法，因此它首先执行它，然后在设置数据后再次执行它，如果您想查看数据，我建议您遵循这种方法，因此确保 log 方法仅在我们获取数据之后调用，而不是在它之前调用。

const [dataLists, setdataLists] = useState([])

const fetchAPI = () => {
        axios.get(`/api/fetchDetails/fetchData/${comp_id}`).then((data) => {

            setdataLists(data.data);
            console.log(data.data); #They both will work
            console.log(dataLists); #They both will work
        }).catch(error => {
            console.log(error);

        })
    }

useEffect(() => {
        fetchAPI()
    }, [])

编码愉快:)

因此，根据您在 cmets 中的问题，仅渲染一次 useEffect 我们可以执行以下操作

const [location, setLocation] = useState("you route.com/somepath")

useEffect(() => {
        fetchAPI()
    }, [location])

这个概念是，只有当我们来到页面时，我们才会渲染 useEffect() 或者只有当我们重新加载它们才会被触发 我已经在我的一个 React 应用程序中使用了它，它们的性能也很好，请尝试一下 :)