React JS中如何遍历渲染API响应数据，解决map时提示对象为函数的报错

出现「待遍历对象是一个函数」的报错，核心原因是你调用map方法的目标值不是数组，要么是异步数据未完成加载时的初始值不符合预期，要么是数据结构和你预设的不一致，可按以下方案修改：

• 所有调用map的位置增加可选链操作符，同时给非数组值兜底为空数组，避免初始渲染时数据未加载完成触发报错
• 确认ninja的实际数据结构，打开控制台查看你打印的data内容，确认inner.data确实是可遍历的数组，而非函数、undefined等其他类型
• 如果ninja是父组件异步传入的属性，需要增加useEffect监听ninja变化同步更新状态，否则props更新时组件状态不会同步
• React自定义组件名首字母必须大写，你原来的detail组件名要改成Detail，否则会被识别为普通HTML标签导致渲染问题

修改后的参考代码如下：

import { useState, useEffect } from 'react'

function Detail({ ninja }) {
  const [data, setData] = useState([]);

  // 监听ninja变化同步更新状态
  useEffect(() => {
    if (ninja) {
      setData([ninja]);
    }
  }, [ninja]);

  return (
    <div>
      {data?.map((inner) => (
        inner?.data?.map((books) => (
          <div key={books.id}>
            <h1 id='home_heading'>{books.name}</h1>
          </div>
        )) || null
      )) || null}
    </div>
  );
}

export default Detail;

如果确认inner.data确实是函数的话，你需要先执行这个函数拿到返回的数组再调用map，也就是把inner?.data?.map改成inner?.data()?.map即可。

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