Next.js调用API时useState无法更新数据问题求助

开发者阿泽

2026-7-2

问题分析与修复方案

核心问题1：useState更新异步，即时打印无法获取新值

setAccessData 是异步操作，调用后立刻执行 console.log(accessData)，此时组件还未重新渲染，拿到的始终是更新前的旧值。你看到的undefined大概率是变量声明不规范引发的额外问题，而非setAccessData本身失效。

核心问题2：变量未声明导致全局污染

bearerToken直接赋值却未用const/let声明，会成为全局变量，可能引发意外的作用域问题。

潜在问题：API返回数据结构校验缺失

即便接口有响应，也需确认userData.users[0].username的结构是否符合预期，避免因字段不存在导致赋值失败。

修复后的代码

interface Pokedex {
  username: string
}

const [accessData, setAccessData] = useState<Pokedex>({
  username: '',
})

useEffect(() => {
  // 规范声明变量，避免全局污染
  const bearerToken = localStorage.getItem('token');
        
  if (bearerToken) {
    const fetchData = async () => {
      try {
        const response = await axios.post(`http://localhost:8004/accesschat`,{userId}, {
          headers: {
            'Authorization': `Bearer ${bearerToken}`,
          },
        });
        const userData = response.data;
        console.log('API返回原始数据:', userData);

        // 先校验数据结构，避免报错中断流程
        if (userData?.users?.length > 0 && userData.users[0].username) {
          setAccessData({
            username: userData.users[0].username
          });
        } else {
          console.warn('API返回数据结构不符合预期，未找到有效username');
        }

      } catch (error) {
        console.error('请求接口失败:', error);
      }
    }
    fetchData();
  }
},[]);

// 通过useEffect监听accessData变化，查看更新后的真实值
useEffect(() => {
  console.log('accessData更新后的值:', accessData);
}, [accessData]);