Как я могу открыть только одно всплывающее окно за раз на основе функции карты в реакции?

Это потому, что вы делаете рендеринг react-jsx модального окна для каждого react-dom фильма в вашем списке.

Извлеките react.js модальное окно из функции react.js map и оставьте его дочерним reactjs элементом компонента, где react.js он не зависит от каких-либо react-component условий, какого-либо сопоставленного react-jsx списка или чего-либо еще reactjs для его рендеринга. Это своего react-jsx рода соглашение (по крайней react-dom мере, среди кодовых баз, с react-component которыми я сталкивался) помещать react.js модальные окна в конец компонента reactjs JSX как прямой дочерний элемент react-dom корневого элемента компонента.

Скрыть reactjs его по умолчанию и показывать react-jsx только тогда, когда пользователь react-component нажимает на фильм, передавая reactjs соответствующую информацию react-component в модальное окно.

Это может react.js выглядеть примерно так:

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

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

  return (
    

your watchlist

{watchlist.length > 0 ? (
{watchlist.map((movie, index) => { // Render the mapped list of JSX elements (movie cards?) // Potentially the `onClick` event would trigger the `setSelectedMovie` function in addition to setting `toggleModal` })}
) : (

Add some movies!

)} {modal && (
)}
) }

reactjs

2022-11-28T05:58:31+00:00
Вопросы с похожей тематикой, как у вопроса:

Как я могу открыть только одно всплывающее окно за раз на основе функции карты в реакции?