TypeError：无法读取未定义Reactjs的属性'length'

Question

我正在尝试创建一个带有React Js的网站，但是当我尝试单击要在其上发表评论的图像时出现错误，该消息说 TypeError：无法读取未定义的属性'length'< / strong> 请问有谁能帮助我找出答案！

这是代码。

谢谢！

<div className="content-margined">
    <h2>Reviews</h2>
    {!product.reviews.length & <div>There is no review</div>}
    
    <ul className="review" id="reviews">
        {product.reviews.map((review) => (
            <li key={review._id}>
                <div>{review.name}</div>
                <div>
                    <Rating value={review.rating}></Rating>
                </div>
                <div>{review.createdAt.substring(0, 10)}</div>
                <div>{review.comment}</div>
            </li>
        ))}
        <li>
            <h3>Write A Commnet</h3>
            {userInfo ? (
                <form onSubmit={submitHandler}>
                    <ul className="form-container">
                        <li>
                            <label htmlFor="rating">Rating</label>
                            <select
                                name="rating"
                                id="rating"
                                value={rating}
                                onChange={(e) => setRating(e.target.value)}
                            >
                                <option value="1">1- Poor</option>
                                <option value="2">2- Fair</option>
                                <option value="3">3- Good</option>
                                <option value="4">4- Very Good</option>
                                <option value="5">5- Excelent</option>
                            </select>
                        </li>
                        <li>
                            <label htmlFor="comment">Comment</label>
                            <textarea
                                name="comment"
                                value={comment}
                                onChange={(e) => setComment(e.target.value)}
                            ></textarea>
                        </li>
                        <li>
                            <button type="submit" className="button primary">
                                Submit
                            </button>
                        </li>
                    </ul>
                </form>
            ) : (
                <div>
                    Please <Link to="/signin">Sign-in</Link> to write a review.
                </div>
            )}
        </li>
    </ul>
</div>

Answer 1

该错误表明product.reviews在渲染期间为undefined，因此没有属性length。您需要确保product.reviews始终是一个数组，或者检查是否首先定义了它：

{!product.reviews || product.reviews.length === 0 && <div>There is no review</div>}

和

{product.reviews && product.reviews.map( ...

Answer 2

似乎在第3行中，product.reviews.length导致了错误，因为product.reviews是undefined，因此找不到length。

根据那个product对象是什么以及您想要发生什么，您可以尝试在长度检查之前添加!product.reviews ||，以解决该对象为空的情况。

Answer 3

首先，您的产品没有对象reviews，因此product.reviews是未定义的。要解决此问题，您必须首先检查产品是否具有这样的评论对象：

product.reviews && product.reviews.length