在控制台中显示此错误。但确切的错误发生位置无法跟踪?
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>
);
}
}
CustomArrows
组件的子div
(位于警告信息上方的div
)。 - kboCustomArrows
的render
/return
方法中搜索.map()
。 - Mosh Feu