javascript - 使用唯一键道具解决问题

Question

我有一个问题控制台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

标签： javascriptarraysjsonreactjsobject

Answer 1

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

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

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

2. 用于React.Fragment应用密钥道具

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