React从外部API拉取数据，刷新页面后调用map报undefined类型错误

你给tshirts设置的初始值是空数组[]，而你后续访问的tshirts.tShirt是对象属性，空数组本身不存在tShirt属性。首次渲染时异步fetch请求还未返回结果，此时tshirtArray取值为undefined，对undefined调用map方法就会抛出该错误。你所说的首次运行正常属于特殊情况，大概率是本地开发环境缓存、热更新或接口响应极快，刚好在首次渲染前完成了数据赋值的巧合，刷新后接口响应和渲染流程时序恢复正常就会稳定复现报错。

方案1：修正状态初始值 #

将tshirts的初始值调整为和接口返回结构对齐的对象，保证初始状态下tShirt属性存在且为数组：

// 把原来的useState([])替换为下面的写法
const [tshirts, setTshirts] = useState({ tShirt: [] });

方案2：属性访问加兜底逻辑 #

使用可选链+空值合并运算符做兼容，保证调用map的目标永远是数组，不受初始值或接口返回异常影响：

// 把原来的tshirtArray赋值替换为下面的写法
const tshirtArray = tshirts?.tShirt ?? [];
const listItems = tshirtArray.map((item) => <li>{item}</li>);

方案3：新增加载状态控制 #

新增加载状态，接口请求完成前不执行遍历逻辑，还可以配合加载提示优化用户体验：

const [tshirts, setTshirts] = useState({ tShirt: [] });
const [loading, setLoading] = useState(true);

const fetchData = () => {
    fetch('apiEndpoint')
        .then((response) => response.json())
        .then((data) => {
            setTshirts(data[0].clothes.regular.top);
        })
        .catch((error) => {
            console.log(error);
        })
        .finally(() => {
            setLoading(false);
        });
};
React.useEffect(() => {
    fetchData();
}, []);

// 渲染逻辑前先判断加载状态
if (loading) return <div>数据加载中...</div>;

const tshirtArray = tshirts.tShirt;
const listItems = tshirtArray.map((item) => <li>{item}</li>);

接口赋值时也可以增加可选链兜底，避免接口返回结构不符合预期时导致状态异常：

setTshirts(data?.[0]?.clothes?.regular?.top ?? { tShirt: [] });

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