Question

我对异步功能的工作方式感到困惑。

console.log返回错误，因为data.rates尚不存在。但是我认为，因为useEffect函数是异步函数，所以异步结束后将调用其下的任何内容。

function App() {
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      const result = await axios.get(
        "https://open.exchangerate-api.com/v6/latest"
      );
      setData(result.data);
    })();
  }, []);

  console.log(data.rates); <-- Error data.rates does not exist
  return <div>{!data ? "Loading..." : "Hello"}</div>;
}

Answer 1

我觉得没有一个答案能真正回答问题。

useEffect不会停止执行流程，在传递给它的回调中执行什么操作都没有关系。因此，console.log(data.rates)被执行，然后一旦安装了组件，便执行传递给useEffect的回调。由于状态已在回调（setData(result.data)中更改，这会触发重新渲染，这一次您应该看到记录的正确值没有任何错误。

Answer 2

您的假设实际上是正确的，这种情况下的useEffect将在组件被装入时运行，这意味着console.log将被调用两次-首先是初始值（未定义），第二个是在useEffect执行完请求后实际设置数据（setData）时执行的副作用。您通常会在数据过时的情况下提供“正在加载”状态。

function App() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState();

  useEffect(() => {
    (async () => {
      setLoading(true);
      const result = await axios.get(
        "https://open.exchangerate-api.com/v6/latest"
      );
      setLoading(false);
      setData(result.data);
    })();
  }, []);

  if (loading) return <div>Fetching data...</div>

  return <div>Hello</div>;
}

Answer 3

尝试执行此操作（我已经创建了一种解决方法）

function App() {
    const [data, setData] = useState();

    useEffect(()=>{
        const setObtainedData=async()=>{
            const result = await axios.get("https://open.exchangerate-api.com/v6/latest");
            setData(result.data);
        };
        setObtainedData();
    },[]);

    if(data){
        console.log(data.rates);
    }
    return <div>{!data ? "Loading..." : "Hello"}</div>;
};

包装在UseEffect中的React异步函数

3 个答案: