警告：列表中的每个子元素都应该有一个唯一的 "key" 属性，无法调试出具体位置？ Note: 每个列表子元素都应该有唯一的 "key" 属性警告，无法确定其准确位置？

Question

警告：列表中的每个子元素都应该有一个唯一的 "key" 属性，无法调试出具体位置？ Note: 每个列表子元素都应该有唯一的 "key" 属性警告，无法确定其准确位置？

4

在控制台中显示此错误。但确切的错误发生位置无法跟踪？

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 在 Slider 组件中使用。我在这里使用了 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>
    );
  }
}

- user14866403

请发布您正在循环遍历某个数组的代码。 - Gayatri Dipali

应该是你的CustomArrows组件的子div(位于警告信息上方的div)。 - kbo

在CustomArrows的render / return方法中搜索.map（）。 - Mosh Feu

好的，我把代码放在上面，请告诉我在代码中哪里放置密钥？ - user14866403

1

return <div key={key}><img src={value} className={classes.carouselimages} /></div> should work - Syder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- b3hr4d · Accepted Answer

试试这个：

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>
    );
  }
}