ReactJs 应用程序的 Json 文件中的映射按钮列表只有 json 数组的最后一个值

Question

我正在列出一个按钮列表，该按钮将在ReactJs页面上导致不同的YouTube视频。问题是，当我从json文件(包含视频链接(映射链接时，所有按钮都会获得映射数组的最后一个链接。我需要一种方法，所有渲染的按钮将获得各自的链接。我的代码如下，我正在使用react ModalVideo来显示我的YouTube视频。

<ul className="list-unstyled">
{datalist.lectures.map((value, index) => { 
return  (
<li key={index}>
<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId={value} onClose={() => setOpen(false)} />

<button className="play-icon" onClick={()=> setOpen(true)}> <i className="las la-play"></i> Lecture: {index+1}</button>
</li>
)})}
</ul>

所有链接都来自Json文件，其中的代码看起来像这个

"lectures": [
"BT4YihNXiYw",
"NSFLhnv2pQI",
"sEPxqpFZit8",
"fU8QhoUJ_sE",
"r3XFYOtvUng",
"MZAkMddxhpg"
]

我认为我现在的问题是，在页面渲染和映射结束后，它只记得最后一个链接存储的值，因为无论我单击哪个按钮，它都会向我显示映射数组的最后一个值

Answer 1

只是一些关于可用的最小片段的快速想法。

1. 我们不要像上面那样渲染多个ModalVideo组件，将其从map中移出
2. 使用其他状态来跟踪youtube视频ID的更改

例如

const [isOpen, setOpen] = useState(false);
const [videoId, setVideoId] = useState(null);
const playVideo = (vid) => {
setOpen(true);
setVideoId(vid);
};
return (
<div>
<ModalVideo
channel='youtube'
autoplay
isOpen={isOpen}
videoId={videoId}
onClose={() => setOpen(false)}
/>
<ul className="list-unstyled">
{
datalist.lectures.map((value, index) => {
return (
<li key={index}>
<button className="play-icon" onClick={() => playVideo(value)}>
<i className="las la-play"></i>
Lecture: {index + 1}
</button>
</li>
)
})
}
</ul>
</div>
);