Javascript 如何将密钥添加到状态挂钩？

嗨，有没有办法向状态挂钩添加id或任何其他键？ 我知道有一种方法可以将它添加到这样的有状态类组件中

 openModal (id) {
    this.setState({
       isOpen: {
          [id]: true
       }
    });
 }

我的问题是我有一个映射的模式，我需要一次打开每个模式。 现在它们都使用相同的状态并同时打开。 我能想到的唯一方法是向state和onClick函数添加一个键。 任何能为我指出单独打开每个模式的方法的建议都是非常受欢迎的

这是我的代码

const Video = () => {
  const [modalIsOpen, setModalOpen] = useState(false)
  console.log(modalIsOpen)
  return (
    <Query query={twoVideos}>
    {({ loading, error, data }) => {
    if (loading) return <h2>Loading post...</h2>
    if (error) return <h1>Error fetching the post!</h1>
        return (
        <>
        {data.video.map(videos => {
            const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
            const match = videos.video.match(regExp);
            const res = (match&&match[7].length==11)? match[7] : false;
        return (
          <div key={videos.id} className="video-box">
          <h2 onClick={() => setModalOpen(true)}>{videos.title}</h2>
          <div className="video-image-box" onClick={() => setModalOpen(true)}>
            <img src={play} className="play-button"/>
            <img src={`https://img.youtube.com/vi/${res}/mqdefault.jpg`} />
          </div>
          {modalIsOpen ?
            <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen(false)}>
                <ReactPlayer 
                    url={`https://www.youtube.com/watch?v=${res}`}
                    playing   
                    config={{
                        youtube: {
                        playerVars: { showinfo: 1, controls: 1 }
                        }
                    }} 
                />
            </Modal>
            : null}
          </div>
        )})}
        </>
        )}}
    </Query>
  )
}

const视频=（）=>{
常量[modalIsOpen，setModalOpen]=useState（false）
控制台日志（打开）
返回(
{（{加载，错误，数据}）=>{
如果（加载）返回加载后。。。
if（error）返回获取帖子时出错！
返回(
{data.video.map（videos=>{
const regExp=/^.*（（youtu.be\/）（v\/）（\/u\/\w\/）（嵌入\/）（监视\？）\？v=（[^和]*）。/；
常量匹配=videos.video.match（regExp）；
常量res=（匹配和匹配[7]。长度==11）？匹配[7]：false；
返回(
setModalOpen（true）}>{videos.title}
setModalOpen（真）}>
{开放吗？
setModalOpen（假）}>
：null}
)})}
)}}
)
}

---

谢谢。

考虑到您一次只想打开一个模态，请使用字符串作为模态id，而不是将布尔值存储在

modelispen

中

短片段

{modalIsOpen === videos.id ? <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen("")}>

{modalIsOpen==videos.id？setModalOpen（“”）}>

在onClick中

<h2 onClick={() => setModalOpen(videos.id)}>{videos.title}</h2>

setModalOpen（videos.id）}>{videos.title}

完整代码：

const视频=（）=>{
常量[modalIsOpen，setModalOpen]=useState（false）
返回(
{（{加载，错误，数据}）=>{
如果（加载）返回加载后。。。
if（error）返回获取帖子时出错！
返回(
{data.video.map（videos=>{
const regExp=/^.*（（youtu.be\/）（v\/）（\/u\/\w\/）（嵌入\/）（监视\？）\？v=（[^和]*）。/；
常量匹配=videos.video.match（regExp）；
常量res=（匹配和匹配[7]。长度==11）？匹配[7]：false；
返回(
setModalOpen（videos.id）}>{videos.title}
setModalOpen（videos.id）}>
{modalIsOpen===videos.id？
setModalOpen（“”}>
：null}
)})}
)}}
)
}

您可以像使用旧类一样使用对象

例如，使用一个对象保存所有模态的状态

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

export default function App() {

  const [modalState, setModalState] = useState({});

  const toggleModal = (key) => {
    setModalState({
      ...modalState,
      [key]: modalState[key] ? false : true,
    })
  }

  const getModalState = (key) => {
    return modalState[key] ? "Open" : "Closed";
  }

  return (
    <div className="App">
      <button onClick={() => toggleModal("1")}>Modal 1 ({getModalState("1")})</button>
      <button onClick={() => toggleModal("2")}>Modal 2 ({getModalState("2")})</button>
      <button onClick={() => toggleModal("3")}>Modal 3 ({getModalState("3")})</button>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[modalState，setModalState]=useState（{}）；
const-toggleModal=（键）=>{
setModalState({
…莫代尔斯塔特，
[key]：modalState[key]？false:true，
})
}
常量getModalState=（键）=>{
返回modalState[键]？“打开”：“关闭”；
}
返回(
toggleModal（“1”）}>Modal 1（{getModalState（“1”）}）
toggleModal（“2”）}>Modal 2（{getModalState（“2”）}）
toggleModal（“3”）}>Modal 3（{getModalState（“3”）}）
);
}

工作代码：