reactjs - 我怎样才能根据 react 中的 map 功能一次只打开一个弹出窗口？

Question

我正在制作一个电影仪表板，用户可以在其中搜索电影并将它们保存到他们的观看列表中。我试图让一个包含电影信息的弹出窗口出现，如果用户点击每部电影的图像卡。这是一种工作，但问题是当我只点击一部电影时，弹出窗口会显示每部电影。我的代码如前所示。我还没有设计弹出窗口的样式，但信息看起来适合每部电影。感谢您的帮助!

function Watchlist() {
  const { watchlist } = useContext(GlobalContext);
  const [modal, setModal] = useState(false);

  const toggleModal = () => {
      setModal(!modal);
  }

  return (
    <div className='watchlist'>
        <h1 className='title'>your watchlist</h1>

        {watchlist.length > 0 ? (
          <div className="movies">
            {watchlist.map((movie, index) => {
              if(index % 3 === 1) {
                return (
                  <div className="movie-wrapper">
                    <button name={movie.id} className="open-modal" onClick={toggleModal} key={movie.id}>
                      <Card img={`https://image.tmdb.org/t/p/w200${movie.poster_path}`} margin={30} key={movie.id}/>
                    </button>
                    {modal && (
                        <div className="movie-details">
                          <div className="modal-content">
                            <ResultCard movie={movie} key={movie.id}/>
                            <button className="close-modal" onClick={toggleModal}>X</button>
                          </div>
                      </div>
                    )}
                  </div>
                )
              } else {
                  <div className="movie-wrapper">
                  <button name={movie.id} className="open-modal" onClick={toggleModal} key={movie.id}>
                    <Card img={`https://image.tmdb.org/t/p/w200${movie.poster_path}`} margin={0} key={movie.id}/>
                  </button>
                  {modal && (
                    <div className="movie-details">
                      <div className="modal-content">
                        <ResultCard movie={movie} key={movie.id}/>
                        <button className="close-modal" onClick={toggleModal}>X</button>
                      </div>
                    </div>
                  )}
                </div>              
              }
            })}
          </div>
        ) : (
          <h2 className="no-movies">Add some movies!</h2>
        )}
    </div>
  )
}

Answer 1

您需要保留要显示模态的电影 ID:

 const [modal, setModal] = useState(false);
 const [selectedMovie, setSelectedMovie] = useState();

 const toggleModal = (movieId) => {
      setModal(!modal);
      setSelectedMovie(movieId)
 }


onClick={() => toggleModal(movie.id)}

并在渲染时检查选择的电影:

{modal && movie.id === selectedMovie && (...