React中如何映射嵌套对象内的对象数组？遇Type Error报错求助

你遇到的Type Error: Cannot read properties of undefined (reading 'map')，大概率是因为data或者data.comments在渲染初期处于undefined/null状态，导致可选链也无法处理。以下是几种直接的解决方式：

• 给数据设置初始兜底值
  如果data是通过useState声明的，初始化时就给comments设为空数组，避免后续渲染时数组不存在：

  const [data, setData] = useState({ comments: [], desc: "", likes: [], userid: "", username: "" });
  

• 给comments兜底空数组
  在调用map前，用|| []确保即使data?.comments是undefined/null，也能拿到空数组进行映射：

  {(data?.comments || []).map((val, id) => {
    return (
      <div className='comment-section' key={id}>
        <span style={{ color: 'gray' }}><b>{val.username}</b></span>
        <span> {val.comment}</span>
      </div>
    )
  })}
  

• 判断数据加载状态
  如果data是异步请求回来的，在渲染组件前先判断数据是否存在，避免提前渲染：

  if (!data) {
    return <div>加载中...</div>;
  }
  
  return (
    <div>
      {/* 其他组件内容 */}
      {data.comments.map((val, id) => {
        return (
          <div className='comment-section' key={id}>
            <span style={{ color: 'gray' }}><b>{val.username}</b></span>
            <span> {val.comment}</span>
          </div>
        )
      })}
    </div>
  );
  

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