警告：列表中的每個孩子都應該有一個唯一的“關鍵”道具。 檢查 `RenderComments` 的渲染方法

Question

我知道我需要一個唯一的密鑰，但我應該在哪里添加它？ 這是 JSON 文件：

"comments": [
    {
      "dishId": 1,
      "rating": "4",
      "author": "Customer1",
      "comment": "This is a test Comment",
      "date": "2022-02-04T12:34:15.994Z",
      "id": 21
    }
]

RenderComment 的渲染方法如下：

function RenderComments({ comments, postComment, dishId }) {
    if (comments != null)
        return (
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    <Stagger in>
                        {comments.map((comment) => {
                            return (
                                <Fade in key={comment._id}>
                                    <li>
                                        <p>{comment.comment}</p>
                                        <p><b>-{comment.author}</b>,
                                            &nbsp;
                                            {new Intl.DateTimeFormat('en-US', {
                                                year: 'numeric',
                                                month: 'long',
                                                day: '2-digit'
                                            }).format(new Date(comment.date))}
                                        </p>
                                    </li>
                                </Fade>
                            );
                        })}
                    </Stagger>
                </ul>
                <CommentForm dishId={dishId} postComment={postComment} />
            </div>
        );
    else
        return (
            <div></div>
        );
}

編輯：我嘗試將“comments._id”更改為“comments.id”，但沒有幫助。

Answer 1

我看到你在 map 中使用了_id屬性，但在 json 中我們有id屬性。 嘗試將key={comment._id}更改為key={comment.id} 。 因為如果對象沒有_id道具，您的密鑰將始終undefined