React中SearchBar组件列表渲染时key属性报错问题求助

我仔细看了你的代码，找到导致key属性报错的原因了！

你当前在map循环里返回的是空Fragment（<>...</>），虽然你给里面的div加了key={item._id}，但React要求key必须绑定在map返回的最顶层元素上——这里的空Fragment才是每个循环项的根元素，而空Fragment本身不支持设置key属性，所以你给内层div加的key对React的diff算法来说是无效的，自然会一直提示key缺失的错误。

两种解决办法： #

办法1：移除不必要的空Fragment

因为你当前的Fragment里只包裹了一个div，完全可以直接返回这个div，把key保留在div上（你已经写了key={item._id}，只要去掉外层Fragment即可）：

{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>
          </div>
        );
      })
    ) : (
      <>
        {" "}
        <div className="py-1 cursor-pointer  px-2">
          No result found...
        </div>
      </>
    )}
  </div>
)}

办法2：如果需要保留Fragment（比如后续要添加多个同级元素）

不要用空的<>...</>，改用完整的React.Fragment并给它设置key：

{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 (
          <React.Fragment key={item._id}>
            <div
              className="py-2 cursor-pointer hover:bg-[#0000ffbe] hover:text-white hover:rounded-lg px-2">
              <div
                onClick={() => {
                  router.push(`/allproducts/${item._id}`);
                  setInput("");
                }}>
                {item.title}
              </div>
            </div>
          </React.Fragment>
        );
      })
    ) : (
      <>
        {" "}
        <div className="py-1 cursor-pointer  px-2">
          No result found...
        </div>
      </>
    )}
  </div>
)}

关键说明： #

React的diff算法通过key来跟踪列表中每个元素的身份，key必须是列表项的唯一标识（你用item._id是完全正确的），而且必须直接绑定在map返回的最外层元素上，这样React才能正确识别每个列表项的变化，避免报错。

按照上面的修改调整后，key的位置就符合React的要求了，报错应该就会消失啦。

备注：内容来源于stack exchange，提问作者fullstack-purbayan