React.js : index.js:1 警告：列表中的每个孩子都应该有一个唯一的“key”道具答案

【问题标题】：React.js : index.js:1 Warning: Each child in a list should have a unique "key" propReact.js : index.js:1 警告：列表中的每个孩子都应该有一个唯一的“key”道具
【发布时间】：2021-07-20 22:29:37
【问题描述】：

我正在做一个应用程序，在前端我使用反应，每当我使用地图功能时，我都会收到这些错误。

你会想……嗯，那是因为你没有为你的容器设置任何密钥，而事实是，我做到了……但是错误不断出现。

让我给你看代码

{specificPhotos.map((photo, i) => {
                return (
                  <>
                    {/* The Photo */}
                    <PhotoWrapper key={photo.id}>
                      {/* For Images */}
                      {photo.photo.charAt(5) === "i" && (
                        <img src={photo.photo} />
                      )}
                      {/* For Videos */}
                      {photo.photo.charAt(5) === "v" && (
                        <>
                          <video src={photo.photo} />
                        </>
                      )}
                      {/* For Videos Too */}
                      {photo.photo.charAt(5) === "v" && (
                        <>
                          <VideoPlay>
                            <VideoPlayIcon />
                          </VideoPlay>
                        </>
                      )}

另外一次我也使用了map fn

 {singlePhoto.comments.map(comment => {
          return (
            <>
              <ContainComment key={comment.id}>
                {/* Photo */}

                <PresentationImg
                  style={{ width: "100%", maxHeight: "50px" }}
                  area="perfil"
                >
                  <CommentPresentation>
                    <img src={comment.presentation} />
                  </CommentPresentation>
                </PresentationImg>

                {/* Body */}

                <TheComment>
                  <h2>
                    {comment.user} <span>{comment.body}</span>
                  </h2>
                </TheComment>

那么，我应该在哪里处理密钥？也许我做错了什么...我不知道，请帮助我并感谢您的时间！

【问题讨论】：

通过console.log检查是否存在ID。

标签： reactjs

【解决方案1】：

问题是您的第二个代码 sn-p。选项1：如果您可以删除 React 片段，即<></>

选项 2：但是，如果 React 片段用于将元素包装在一起，则可以将其替换为

<div key={comment.id}><div/>

这意味着您可以删除<ContainComment key={comment.id}> 上的key={comment.id}

【讨论】：

谢谢！我不知道那会毁了我的东西）；

【解决方案2】：

您的键应该在最顶部的元素上，在这种情况下是片段。见keyed-fragments

<React.Fragment key={comment.id}>
    <ContainComment>

【讨论】：

非常感谢您的回答！

【解决方案3】：

您需要在返回后立即向片段添加一个键（<>），但不幸的是，如果它作为片段导入（<Fragment key={}></Fragment>），您只能添加一个键，而不是使用短语法。

【讨论】：

你可以像这样从 react 中导入 Fragment：import React, { Fragment } from 'react';
谢谢你的回答，我明白了！

【解决方案4】：

如上所述，React 片段 <></> 是问题所在。

为什么会这样：

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

与此不同？

const todoItems = todos.map((todo) =>
  <>
    <li key={todo.id}>
      {todo.text}
    </li>
  </>
);

因为片段需要在第二个 sn-p 中（或移除）其上的键以防止映射错误。

如果您需要保留片段以避免添加不必要的 div，您也可以这样做：

const todoItems = todos.map((todo) =>
  <React.Fragment key={todo.id}>
    <li>
      {todo.text}
    </li>
  </React.Fragment>
);

来源：https://reactjs.org/docs/lists-and-keys.html#keys

【讨论】：