首页 > 解决方案 > 警告:列表中的每个孩子都应该有一个唯一的“关键”道具 - 与 next.js 反应

问题描述

有人告诉我这个问题是因为我可能<> </>在 map 函数中有这个标签,这是错误的主要原因,但事实并非如此,我仍然有这个问题,让我展示一下

在此处输入图像描述

现在,让我展示一些代码

  <SearchResults>
              {results === "" ? (
                <NoSearch>No hay búsquedas recientes</NoSearch>
              ) : (
                <>
                  {filteredUsers.length > 0 ? (
                    <>
                      {filteredUsers.map(user => {
                        return (
                          <DisplayUsers
                            key={user.id}
                            whileHover={{
                              backgroundColor: "rgba(0, 0, 0, 0.08)",
                              borderRadius: "1.2rem"
                            }}
                          >
                            <DisplayPhoto>
                              {user.perfil ? (
                                <img src={user.perfil} alt="" />
                              ) : (
                                <DefaultUser
                                  style={{
                                    width: "38px",
                                    height: "38px",
                                    borderRadius: "50%"
                                  }}
                                />
                              )}
                            </DisplayPhoto>
                            <DisplayName>
                              <h2>{user.name}</h2>
                              {/* <p>Amig@</p> */}
                            </DisplayName>
                          </DisplayUsers>
                        );
                      })}
                    </>
                  ) : (
                    <NoSearch>No hay resultados</NoSearch>
                  )}
                </>
              )}
            </SearchResults>

如果我把钥匙放在主容器中,为什么我仍然有这个问题?

如果你能帮助我,你是最伟大的,谢谢!!

标签: reactjsnext.js

解决方案


推荐阅读