从Facebook API拉取数据后，React state未及时更新导致页面无法渲染数据的解决方法

问题场景 #

从Facebook API拉取数据时，console.log(response.data)能正常输出JSON数据，但调用setData(response.data)后立即打印data却显示为空数组，页面也无法渲染数据。相关代码如下：

获取数据的代码：

const response = await axios.get('API ENDPOINT')
setData(response.data); // 假设数据在response.data中
console.log(response.data) // 能正常打印值
console.log('Data copied to state:', data); // 输出空数组

渲染代码：

{data?.length > 0 && (
  <ul>
    {data.map((item, index) => (
      <li key={index}>
        {/* 访问item属性 */}
        {item.email} - {item.last_name}
      </li>
))}

问题原因 #

1. React状态更新的异步性：setData（基于useState的状态更新函数）是异步操作，调用后不会立即修改data变量的值，所以紧接着打印data拿到的还是更新前的旧值。
2. API返回数据结构可能不符：Facebook API返回的数据通常会包裹在data字段中（比如{ data: [...] }），如果直接把response.data传给setData，可能拿到的不是数组而是包含数组的对象，导致data.length始终为0。
3. 渲染代码存在语法问题：原渲染代码中<ul>标签未闭合，且使用了转义字符>、&&，在JSX中需要直接使用>、&&。

解决方案 #

1. 正确处理状态更新的异步性

不要在setData后立即打印data，改用useEffect监听data的变化，在状态更新完成后再打印：

import { useEffect } from 'react';

// ... 获取数据的代码 ...
const response = await axios.get('API ENDPOINT');
// 注意：如果Facebook API返回的是{ data: [...] }，要改成response.data.data
setData(response.data);
console.log('API返回的数据:', response.data);

// 监听data变化，状态更新后触发
useEffect(() => {
  console.log('Data copied to state:', data);
}, [data]);

2. 确认并适配API返回的数据结构

检查Facebook API返回的JSON结构，比如如果返回格式是：

{
  "data": [
    {"email": "xxx@example.com", "last_name": "Doe"},
    {"email": "yyy@example.com", "last_name": "Smith"}
  ]
}

那么需要修改setData的参数为response.data.data，确保传入的是数组：

setData(response.data.data);

3. 修正渲染代码的语法错误

确保JSX标签闭合，使用正确的逻辑运算符：

{data?.length > 0 && (
  <ul>
    {data.map((item, index) => (
      <li key={index}>
        {item.email} - {item.last_name}
      </li>
    ))}
  </ul>
)}

总结 #

• 利用useEffect监听状态变化来验证更新后的值，避免在异步状态更新后立即访问旧值；
• 严格匹配API返回的数据结构，确保传给状态的是预期的数组；
• 修正JSX语法错误，保证渲染逻辑正常执行。

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