React中添加comments数组至state后，无法访问其length属性的问题求助

问题根源 #

你遇到的错误核心是组件初始化阶段product的初始状态未定义：

• 组件首次渲染时，fetch请求还未完成，product保持初始值（大概率是undefined或空对象），此时访问product.comments自然是undefined，再读取length就会抛出错误。
• 你看到console.log(product.comments)能正常输出，是因为这个打印是在fetch请求完成、setProduct更新状态之后执行的，属于后续渲染的结果，和初始渲染的报错场景不冲突。

修复方案 #

1. 给product设置带comments的初始状态 #

在声明product状态时，直接初始化一个包含空comments的对象，从根源避免未定义问题：

const [product, setProduct] = useState({ comments: [] });

2. 使用可选链操作符做安全访问 #

如果不想修改初始状态，可通过可选链?.确保在product或comments未定义时不会报错：

{product?.comments?.length ? (
  product.comments.map((comment) => {
    return (
      <li key={comment.id}> {/* 必须添加唯一key属性，避免React警告 */}
        <div className="testimonial">
          <p className="quote">{comment.comment}</p>
        </div>
      </li>
    )
  })
) : (
  <h2>Be first to comment</h2>
)}

注意：你原代码里写的comments.map要改成product.comments.map，否则会找不到comments变量。

3. 结合loading状态控制渲染 #

利用已有的loading状态，在请求未完成时不渲染评论相关内容：

{!loading ? (
  product.comments.length ? (
    product.comments.map((comment) => {
      return (
        <li key={comment.id}>
          <div className="testimonial">
            <p className="quote">{comment.comment}</p>
          </div>
        </li>
      )
    })
  ) : (
    <h2>Be first to comment</h2>
  )
) : (
  <div>Loading...</div> {/* 可添加加载提示提升体验 */}
)}

额外提示 #

• 渲染列表时必须给每个子元素添加唯一的key属性，这是React的要求，能避免不必要的重渲染和警告。
• 后续添加评论时，可通过函数式更新确保状态的正确性：setProduct(prev => ({...prev, comments: [...prev.comments, newComment]}))

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