我使用fetch将产品作为一个对象获取，在将其设置为我的状态时，我向该对象添加了新的键comments: []，如果是console.log(product.comments)，它将返回空数组，这是正确的，但当是console.log(product.comments.length)时，它将返回can't access property "length", product.comments is undefined

useEffect(() => {
    
    setLoading(true)
    fetch(`https://fakestoreapi.com/products/${id}`)
        .then((res) => res.json())
        .then((data) => {
            setProduct({ ...data, comments: [] })
            setLoading(false)
        })
        .catch((err) => console.error(err))
}, [id])

我做错了什么，如何得到comments的长度以便Map它？这是我想做的

`{product.comments.length ? (
  comments.map((comment) => {
   return (
    <li>
     <div className="testimonial">
      <p className="quote">{comment.comment}</p>
     </div>
    </li>
   )
 })
 ) : (
    <h2>Be first to comment</h2>
 )}`

我还尝试将product.comments.length记录到控制台，但得到了相同的错误