使用唯一键道具解决问题答案

【问题标题】：Fixing the problem with a unique keys prop使用唯一键道具解决问题
【发布时间】：2021-03-29 22:55:37
【问题描述】：

我遇到了一个问题控制台Each child in a list should have a unique "key" prop.，它干扰了我的购物车功能我已经创建了它的副本https://codesandbox.io/s/quiet-http-8yhkp

import React,{useState, useEffect, useContext} from 'react'
import './Home.css'
import Books from './Books'
import { BookContext } from "../../context/books";
const Home = () => {
   const {data, handleSelectCategory, currentSelectedCategory } =useContext(BookContext)
    return (
        <div className='books__container' >
          <h1 className='categories'>Categories</h1>
            {Object.keys(data).map((key, index)=>{
            let books = data[key];
            return (
              <> 
              <span key={key} onClick={() => handleSelectCategory(key)} className='books__list' >
              {books[0].category}
              </span>         
             </>
              );})}
              <Books category={currentSelectedCategory} />
        </div>
    )
}

export default Home

【问题讨论】：

您的 CodeSandbox 似乎缺少 "code" 部分
你会得到错误，因为当你使用地图时，你把键放在跨度上，但是你的跨度被一个片段包围......就像这样在这里带键的跨度 > 获取摆脱你不需要的片段标签
可以将密钥提供给React.Fragment（不是其简写形式），但在您的代码中，您可以删除片段。请参阅此答案以了解关键：stackoverflow.com/a/66703936/2873538
@它忘了保存代码我的坏

标签： javascript arrays json reactjs object

【解决方案1】：

您需要提供最外层 JSX 元素的键。你可以

删除<> </> 标签（最佳选择）

return (
   <span key={key} onClick={() => handleSelectCategory(key)} className='books__list' >
     {books[0].category}
   </span>         
   )

使用React.Fragment 应用密钥属性

return (
  <React.Fragment key={key}>
   <span key={key} onClick={() => handleSelectCategory(key)} className='books__list' >
     {books[0].category}
   </span>
  </React.Fragment>         
 )

【讨论】：