React中API取数存数组：浏览器刷新与VSCode保存表现差异问题

问题根源 #

你遇到的问题核心是React的useState更新是异步操作，且函数组件的state值由当前闭包决定：

• 在axios请求的回调里，调用setCountry(names)后立刻console.log(country)，此时country还是当前函数闭包中的旧值（也就是初始的空数组[]）——setState不会立刻同步更新state。
• 热重载时组件会重新渲染，浏览器控制台对数组这类引用类型的日志存在“延迟展开”特性（展开时显示最新值），导致你误以为打印的是更新后的state，但实际上那个console.log执行时拿到的依然是旧state。

解决方法 #

方法1：监听state变化打印最新值

用额外的useEffect监听country的变化，每当state更新时自动打印最新值：

const [country, setCountry] = useState([]);
    
useEffect(() => {
  axios.get("https://restcountries.com/v3.1/all")
    .then((response) => {
      const data = response.data;
      const names = data.map((n) => n.name.common);
      setCountry(names);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

// 监听country变化，打印最新值
useEffect(() => {
  console.log(country);
}, [country]);

方法2：直接打印待设置的新值

如果只是要确认请求返回的数据处理是否正确，直接打印处理后的names即可——这是你要设置给state的最新数据，不存在异步问题：

axios.get("https://restcountries.com/v3.1/all")
  .then((response) => {
    const data = response.data;
    const names = data.map((n) => n.name.common);
    setCountry(names);
    console.log(names); // 直接打印处理后的新数据
  })
  .catch((error) => {
    console.log(error);
  });

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