javascript - 如何向状态 Hook 添加键？

Question

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

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

我的问题是我有一个映射的模式，我需要一次打开每个模式。 现在它们都使用相同的状态并同时打开。 我能想到的唯一方法是向状态以及 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>
  )
}

谢谢。

Answer 1

考虑到您只想一次只打开一个模态，而不是在 modelIsOpen 中存储 bool 值，而是使用字符串作为模态的 id

简短片段

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

和 onClick

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

完整代码:

const Video = () => {
  const [modalIsOpen, setModalOpen] = useState(false)
  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(videos.id)}>{videos.title}</h2>
                <div className="video-image-box" onClick={() => setModalOpen(videos.id)}>
                  <img src={play} className="play-button"/>
                  <img src={`https://img.youtube.com/vi/${res}/mqdefault.jpg`} />
                </div>
                {modalIsOpen === videos.id ?
                  <Modal style={customStyles} isOpen={modalIsOpen} onRequestClose={() => setModalOpen("")}>
                      <ReactPlayer 
                          url={`https://www.youtube.com/watch?v=${res}`}
                          playing   
                          config={{
                              youtube: {
                              playerVars: { showinfo: 1, controls: 1 }
                              }
                          }} 
                      />
                  </Modal>
                  : null}
                </div>
              )})}
              </>
          )}}
    </Query>
  )
}