Html ReactJs应用程序'；Json文件中的按钮映射列表仅具有Json数组的最后一个值

我正在制作一个按钮列表，这些按钮将在页面上显示不同的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>

---

我认为现在的问题是，在页面呈现和映射结束后，它只会记住最后一个链接存储在值中的内容，因为无论单击哪个按钮，它都会显示映射数组的最后一个值，这只是查看可用的最小片段的一些快速想法

让我们不要像上面那样渲染多个

ModalVideo

组件，将其从

映射中移出

使用其他状态跟踪youtube视频ID的更改

比如说

const[isOpen，setOpen]=useState（false）；
const[videoId，setVideoId]=useState（null）；
常量播放视频=（视频）=>{
setOpen（真）；
setVideoId（vid）；
};
返回(
setOpen（false）}
/>

{
datalist.touctions.map（（值，索引）=>{
返回(

播放视频（值）}>
讲座：{index+1}

)
})
}

);是否根据数组中的值在子元素中构造链接？是否向
中添加一个unqiue键。这里您的键可以是value。@TusharShahi Shahi我正在根据我在数组中拥有的尽可能多的值创建链接，并且我尝试在
中添加key={value}，它仍然不起作用。谢谢您，它现在工作得很好，我需要更改const{videoId，setVideoId}=useState（null）的括号；to const[videoId，setVideoId]=useState（null）；否则它说它没有功能。再次感谢@ChinKangyou是对的，请原谅我一年多没有用javascript写东西了。我将编辑以上内容，谢谢
 "lectures": [
                "BT4YihNXiYw",
                "NSFLhnv2pQI",
                "sEPxqpFZit8",
                "fU8QhoUJ_sE",
                "r3XFYOtvUng",
                "MZAkMddxhpg"
                 ]