React Hooks useState未更新：调用第三方接口后items.map方法报错

核心问题原因 #

• React的setState是异步批量更新的，你在setItems(res.data.artObjects)之后立刻打印items，拿到的是当前渲染周期内的旧state值，不代表state没有更新，组件完成重渲染后就会拿到新值，可以在组件函数顶层打印items验证更新结果。
• 你没有对接口返回值做类型兜底，items.map is not a function报错的本质是执行map时items不是数组：可能是接口返回的res.data.artObjects为undefined、null，或接口异常时没有重置为数组。

修复方案 #

• 赋值state前先做类型校验，确保传入setItems的一定是数组
• 接口报错时重置state为空数组，避免遗留异常值
• 渲染前先判断items是否为数组再执行map操作，也可以加可选链做双重保障

完整修复代码 #

import React, { useState, useEffect} from "react";
import axios from "axios";

const FeaturedWorks = () => {
  const [items, setItems] = useState([]);
  // 组件顶层打印可以看到state更新后的值
  console.log('更新后的items：', items)

  const fetchRandomData = async () => {
    try {
      const res = await axios(
        `https://www.rijksmuseum.nl/api/en/collection?key=XXXXXXX`
      );
      // 赋值前先做类型校验兜底，确保set的一定是数组
      const artList = Array.isArray(res.data?.artObjects) ? res.data.artObjects : []
      setItems(artList);
    } catch (error) {
      console.log(error);
      // 接口报错时重置为空数组，避免遗留异常值
      setItems([])
    }
  };

  useEffect(() => {
    fetchRandomData();
  },[]);

  return (
    <div className="featured-container">
      {/* 先判断是数组再执行map */}
      {Array.isArray(items) && items.map((item, idX) => (
        <h5 key={idX}>{item.title}</h5>
      ))}
    </div>
  );
};

export default FeaturedWorks;

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