React中useState存储的接口数据为何在组件函数内为空但外部可显示？

这是React闭包特性导致的问题，核心是函数捕获了创建时的旧状态。

具体分析 #

你的代码执行流程是这样的：

1. 组件首次渲染，fetchedData初始值是空字符串，此时functionThatNeedsFetchedData被创建，它捕获的是这个初始的空状态。
2. useEffect触发，异步请求数据，更新fetchedData，组件触发第二次渲染。
3. 第二次渲染时，console.log会重新执行，此时能看到最新的fetchedData；但如果functionThatNeedsFetchedData是在第一次渲染时被调用（比如传给了子组件、定时器或者其他不会随渲染更新的地方），它依然拿着第一次捕获的空字符串，不会自动同步最新状态。

解决方法 #

方法一：用useCallback包裹函数，依赖fetchedData

这样每次fetchedData更新时，函数都会重新创建，确保拿到最新状态：

import { useState, useEffect, useCallback } from 'react';

const [fetchedData, setFetchedData] = useState("")

useEffect(() => {
  const fetchDataAsync = async () => {
    const { data } = await fetchData(id);
    setFetchedData(data.name);
  };
  fetchDataAsync();
}, []);

const functionThatNeedsFetchedData = useCallback(() => {
  return fetchedData;
}, [fetchedData]); // 依赖fetchedData，状态更新时函数重新生成

方法二：确保函数在状态更新后再被调用

如果functionThatNeedsFetchedData是用于渲染内容，直接在JSX里调用即可，因为组件重新渲染时会执行最新的函数：

return <div>{functionThatNeedsFetchedData()}</div>

这种情况下不需要useCallback，每次渲染都会重新定义函数，自然能拿到最新状态。

额外提示

你的useEffect依赖是空数组，但里面用到了id，如果id是外部变量，记得把id加入依赖数组，否则id变化时不会重新请求数据：

useEffect(() => {
  const fetchDataAsync = async () => {
    const { data } = await fetchData(id);
    setFetchedData(data.name);
  };
  fetchDataAsync();
}, [id]); // 添加id到依赖

内容的提问来源于stack exchange，提问作者bonum_cete