我有一个标题列表,我点击标题,然后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;
1条答案
按热度按时间svgewumm1#