javascript 警告:列表中的每个子项都应该有一个唯一的“键” prop ,如何对多个项目使用通用键?

dw1jzc5e  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(120)

我有一个标题列表,我点击标题,然后React填充一个图像。
我收到一个错误,我想删除它。
适用于以下情况:我怎样才能填充一个唯一的键到多个元素以消 debugging 误。我已经尝试了多次尝试添加键,做数学键,提供一个唯一的键所有元素,但我失败了。请帮助。

import React, { useState } from "react";
import "./App.css";

// import image files
import img0 from "./seasons/0.png";
import img1 from "./seasons/1.png";
import img2 from "./seasons/2.png";
import img3 from "./seasons/3.png";
import img5 from "./seasons/cap.png";

// create array object
const season = [
    {
        id: "10",
        key: "1",
        title: "Spring",
        img: img1,
    },
    {
        id: "20",
        key: "2",
        title: "Summer",
        img: img0,
    },
    {
        id: "30",
        key: "3",
        title: "Autumn",
        img: img2,
    },
    {
        id: "40",
        key: "4",
        title: "Winter",
        img: img3,
    },
    {
        id: "50",
        key: "5",
        title: "Instructions",
        img: img5,
    },
];

// function to populate images on page in alternative method using an array of objects
function Season() {
    // use State toggle, to toggle state between key selected
    const [toggle, setToggle] = useState();

//如何修改以下内容以删 debugging 误???

return (
        <div className="container">
            {season.map(({ id, key, title, img }) => {
                return (
                    <div key={id}>
                        <h1 onClick={() => setToggle(key)}>{title}</h1>
                        {toggle === key ? (
                            <div>
                                {/* inline style image */}
                                <img
                                    style={{
                                        width: 350,
                                        height: 350,
                                        borderRadius: 400 / 2,
                                    }}
                                    src={img}
                                />
                            </div>
                        ) : null}
                    </div>
                );
            })}
        </div>
    );`enter code here`
}

export default Season;
svgewumm

svgewumm1#

import React, { useState } from "react";
import './App.css';

// import image files
import img0 from './seasons/0.png'
import img1 from './seasons/1.png'
import img2 from './seasons/2.png'
import img3 from './seasons/3.png'
import img5 from './seasons/cap.png'

// create array object
const season = [
    {
    id : "1",
    key: "1",
    title: "Spring",
    img: img1
    },
    {
    id : "2",
    key: "2",
    title: "Summer",
    img: img0
    },
    {
    id : "3",
    key: "3",
    title: "Autumn",
    img: img2
    },
    {

    id : "4",
    key: "4",
    title: "Winter",
    img: img3
    },
    {
    id : "5",
    key: "5",
    title: "Instructions",
    img: img5
    },
];

// function to populate images on page in alternative method using an array of objects
function Season() {

    // use State toggle, to toggle state between key selected
    const [toggle, setToggle] = useState("1");
    // 
    return (
    <div className="container">
        {season.map(({ id, key, title, img }) => {
        return (
            <div className="row"  key={key}>
                <div>
                    {/* on click event toggle key use state, unique identifier */}
                <h1 onClick={() => setToggle(key)}>{title}</h1>
                {toggle === key ? (
                    <>
                    {/* inline style image */}
                    <img style={{width: 350, height: 350, borderRadius: 400/ 2}}  src={img} alt="seasonal_insutructions"/>
                    </>
                ) : null}
                </div>
            </div>
        );
        })}
    </div>
    );
}

export default Season

相关问题