React中首次调用API后打印状态为null，后续调用正常的原因

这不是setResult在API调用完成前执行，核心原因是React的useState更新是异步的：

当你在handleTrackParcel里拿到API返回的result.result并调用setResult后，React不会立刻同步更新results状态值。此时你立刻执行console.log(results)，取到的是当前函数闭包中保存的旧状态（也就是初始的null）。

第二次点击时，results已经完成第一次更新，所以此时console.log(results)能拿到上一次API返回的有效值。

解决办法 #

1. 直接打印API返回的原始数据（无需等待状态更新）：

const handleTrackParcel = async () => {
    try {
      const result = await (
        await fetch(
          baseURL + `${trackParcel}/24?api_key=9f57d1155413ce9`
        )
      ).json();

      setResult(result.result);
      // 直接打印刚获取的最新数据
      console.log(result.result.LabelNumber);
    } catch (error) {
      console.log(error.message);
    }
};

2. 如果需要基于更新后的results做后续操作，用useEffect监听状态变化：

import { useEffect, useState } from 'react';

// ... 其他代码

useEffect(() => {
  // 当results状态更新时执行这里的逻辑
  if (results) {
    console.log(results.LabelNumber);
    // 其他需要基于最新results的操作
  }
}, [results]); // 依赖项设为results，状态变化时触发

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