fetch请求返回多个null后才拿到数据，报reading 'forEach'错误如何解决？

问题结论 #

这是代码编写逻辑问题，和fetch本身的行为无关。

问题原因 #

• 状态初始值设置不合理
  你给subDomains的初始值设为null，而useEffect包裹的fetch请求是异步操作，会在组件首次渲染完成后才执行。因此组件首次渲染、以及请求返回前的所有渲染阶段，subDomains都是null，传递给子组件后直接调用forEach就会触发你遇到的类型错误。
  如果你的项目是React18+版本且开启了严格模式，开发环境下useEffect会默认执行两次，这也是你会看到多次null输出的原因之一。
• 子组件列表渲染方法错误
  React中渲染列表需要用map方法返回JSX元素，forEach没有返回值，就算解决了null的问题，页面也不会渲染出任何域名内容。

修复方案 #

1. 修正状态初始值
   把subDomains的初始值改为空数组，请求未完成时也可以正常调用遍历方法，不会报错：

const [subDomains, setSubDomains] = useState([])

2. 修正子组件渲染逻辑，增加兜底校验
   就算后续有异常场景返回null，也可以避免报错，同时可以自定义加载提示：

const SubDomains = ({domains}) => {
  // 非空兜底，无数据时显示加载提示
  if (!domains?.length) return <div>域名加载中...</div>
  
  return (
      <div>
          <div>
              {/* 将forEach替换为map，遍历渲染需要添加唯一key属性 */}
              {domains.map((e, index) => 
                  <h2 key={index}>{e}</h2>
              )}
          </div>
      </div>
  )
}

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