React使用fetch获取数据后调用map报undefined错误如何解决？

• 取值逻辑不匹配：你在请求回调中已经将接口返回的json.items（新闻列表数组）直接赋值给pressReleases状态，但渲染时错误读取pressReleases.items，pressReleases本身是数组不存在items属性，读取结果为undefined，调用map方法直接触发报错。
• 初始状态设置错误：pressReleases的初始值被设为[null]，即使修正取值逻辑，首次渲染也会遍历到null值，容易引发后续组件渲染异常。

修改状态初始值与渲染逻辑即可，修正后参考代码如下：

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

export const PressReleaseList = () => {
  // 初始值改为空数组，匹配后续存入的新闻列表数组类型
  const [pressReleases, setPressReleases] = useState([]);

  useEffect(() => {
    (async function () {
      try {
        const res = await fetch(
          'https://feed.mfn.se/v1/feed/3XXXXX.json'
        );
        const json = await res.json();
        setPressReleases(json.items);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return (
    <Main>
      {/* 直接遍历pressReleases，加可选链兜底避免异常 */}
      {pressReleases?.map((item) => (
        <TextCell key={item.news_id}>
          <CategoryText>{item.title}</CategoryText>
        </TextCell>
      ))}
    </Main>
  );
}

如果需要避免空屏体验，可以额外新增loading状态，在接口请求完成前渲染加载提示组件。

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