警告：列表中的每个孩子都应该有一个唯一的“关键”道具，无法调试到底在哪里显示？

Posted 2023-02-25

【中文标题】警告：列表中的每个孩子都应该有一个唯一的“关键”道具，无法调试到底在哪里显示？

【英文标题】：Warning: Each child in a list should have a unique "key" prop unable to debug where is shows exactly?

【发布时间】：2021-01-13 08:24:58

【问题描述】：

在控制台中显示此错误。但是究竟是哪里发生了无法追踪的错误呢？

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `CustomArrows`. See https://reactjs.org/link/warning-keys for more information.
    at div
    at CustomArrows (http://localhost:3000/static/js/bundle.js:89771:5)
    at div
    at div
    at div
    at div
    at div
    at Home (http://localhost:3000/static/js/bundle.js:97055:9)
    at Route (http://localhost:3000/static/js/bundle.js:70064:29)
    at div
    at App (http://localhost:3000/static/js/bundle.js:87224:5)
    at Router (http://localhost:3000/static/js/bundle.js:69693:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:69299:35)

这是我在滑块组件中使用 Customarrows 的整个组件代码。 我在这里使用 react 包作为 react-slick：

import React,  Component  from "react";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import classes from './photocarousel.css'
export default class CustomArrows extends Component 
  render() 
    function importAllCarouselImg(r) 
        let images = ;
        r.keys().map((item, index) => 
           images[index] = r(item); 
          );
          return images;
    

    const carouselimages = importAllCarouselImg(require.context('../../assets/Images/carouselimages', false, /\.(png|jpe?g|svg)$/));
    const carouselArray = Object.entries(carouselimages).map(([key,value]) => 
      return <div><img src=value className=classes.carouselimages /></div>
   );

    
    return (
      <div>
        <Slider >
            
          carouselArray
        </Slider>
      </div>
    );
  

【问题讨论】：

发布你正在循环遍历某个数组的代码

应该是CustomArrows 组件的子div（警告消息顶部的div）。

在CustomArrows 的render / return 方法中搜索.map(。

好的，我把代码放在上面了，请告诉我我把钥匙放在代码的什么地方？

return 应该可以工作

【参考方案1】：

试试这个：

export default class CustomArrows extends Component 
  render() 
    function importAllCarouselImg(r) 
        let images = ;
        r.keys().map((item, index) => 
           images[index] = r(item); 
          );
          return images;
    

    const carouselimages = importAllCarouselImg(require.context('../../assets/Images/carouselimages', false, /\.(png|jpe?g|svg)$/));
    return (
      <div>
        <Slider >
          Object.entries(carouselimages).map(([key,value],i) => (
            <div key=i><img src=value className=classes.carouselimages /></div>
          ))
        </Slider>
      </div>
    );
  

【讨论】：

它有效。谢谢你！控制台中显示另一个错误：caught SyntaxError: Unexpected token '<' jquery-3.3.1.min.js:1 如果您能帮助我解决此错误，我将不胜感激。

这是一个外部包，你是否在某个地方导入了 jQuery？

是的，我在 index.html 文件中导入了 jQuery CDN

查看link

尝试使用 npm 安装 jQuery npm install jquery follow this