列表中的每个子项都应该有一个唯一的“key”道具。检查 `SearchBar` 的渲染方法

Question

 {divisVisible && (
      <div className="absolute bg-[#ffffff] text-gray-700 w-[300px] h-auto py-3 px-3 rounded-lg mt-2 z-20 border-black border-2 border-solid ">
        {data && data.length > 0 ? (
          data?.map((item: any) => {
            return (
              <>
                <div
                  className="py-2 cursor-pointer hover:bg-[#0000ffbe] hover:text-white hover:rounded-lg px-2"
                  key={item._id}>
                  <div
                    onClick={() => {
                      router.push(`/allproducts/${item._id}`);
                      setInput("");
                    }}>
                    {item.title}
                  </div>
                  {/* </Link> */}
                </div>
              </>
            );
          })
        ) : (
          <>
            {" "}
            <div className="py-1 cursor-pointer  px-2">
              No result found...
            </div>
          </>
        )}
      </div>
    )}

我尝试向渲染的 div 添加键，但问题仍然存在。否则这是完美的工作。只是错误不断出现。

Answer 1

列表的子元素是片段 (

<>   </>

)，而不是 div。 在您的代码中，该片段不是必需的，因此删除它应该可以解决错误，因为您已经在

<div key= ...>

中使用了键。

如果需要片段，请参阅以下线程中的答案，以在反应中为片段设置密钥： 我可以向 React 片段添加 key prop 吗？