Перерисовать модальный компонент onClick с параметрами случайного значения

Идея должна заключаться не в том, чтобы повторно отображать модальное окно с другим содержимым, а просто держать его открытым и заставить компонент, который он отображает, повторно отображать со своим собственным новым состоянием/контентом/и т. д.

Выполните рефакторинг вашего кода, чтобы:

1. Отделите и объявите AirportDetails вне компонента Modal, чтобы он не объявлялся повторно при каждом цикле рендеринга. Это исправляет анти-шаблон React. Уберите состояние reload, это тоже антипаттерн.

   import { useEffect, useRef, Fragment, Link, useState } from "react";
   import { useParams, useNavigate, useLocation } from "react-router-dom";
   import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
   import airportData from '../airports.json';
   
   export function Modal() {
     const modalRef = useRef();
     const { id } = useParams();
     const navigate = useNavigate();
   
     useEffect(() => {
       const observerRefValue = modalRef.current;
       disableBodyScroll(observerRefValue);
   
       return () => {
         if (observerRefValue) {
           enableBodyScroll(observerRefValue);
         }
       };
     }, []);
   
     function setImageUrlLarge(url) {
       return {
         backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/large/${url}.jpg)`
       }
     }
   
     return (
       <div ref = {modalRef} className = "modal-wrapper">
         <div className = "modal">
           <div className = {`detail ${id} overlay`} style = {setImageUrlLarge(id)}>
             <a className='overlay' rel='noopener'></a>
             <AirportDetails id = {id} airportData = {airportData} />
           </div>
         </div>
       </div>
     )
   }
   

2. Обновите AirportDetails, чтобы инициализировать состояние data данными случайного аэропорта, и обновите обработчик onClick, чтобы выбрать данные случайного аэропорта и поставить в очередь обновление состояния. Отобразите все детали аэропорта из местного data штата.

   function AirportDetails({ id, airportData }) {
     // Initialize data to specific airport by id,
     // otherwise select a random airport.
     const [data, setData] = useState(() => {
       const airport = airportData.find(
         (airport) => airport.id.toLowerCase().includes(id.toLowerCase())
       );
   
       return airport ? airport : randomAirport(airportData);
     });
   
     ...
   
     return (
       <div className='container'>
         <div className='detail-info'>
           <h1>{data.id}</h1>
           <h2>{data.name}</h2>
           <h3><span className = "local_name">{data.local_name}</span></h3>
           <h4>{data.city}</h4>
           <div className = "description fl-edu">
             <p dangerouslySetInnerHTML = {{ __html: em}}></p>
           </div>
           <a
             className = "random"
             role = "button"
             onClick = {() => {
               // Enqueue state update to new random airport data
               setData(randomAirport(airportData));
             }}
           >
             Random Airport
           </a>
           ...
         </div>
         <div className = "photo-credit">
           Photo by <a>{data.imageCredit}</a>
         </div>
         ...
       </div>
     )
   }
   
   function randomAirport(airportData) {
     const rand = Math.floor(Math.random() * airportData.length);
     return airportData[rand];
   }
   

Альтернатива

Поскольку параметр пути маршрута id и данные airports.json используются для вычисления производного состояния в AirportDetails, я могу предложить улучшение, заключающееся в том, чтобы не копировать какие-либо данные в какое-либо локальное состояние (в любом случае это что-то вроде антишаблона React) и напрямую вычислить соответствующие данные аэропорта на основе текущего значения id и просто перейти к новому случайному значению идентификатора аэропорта.

Пример:

import { useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";

export function Modal() {
  const modalRef = useRef();
  const { id } = useParams();

  useEffect(() => {
    const observerRefValue = modalRef.current;
    disableBodyScroll(observerRefValue);

    return () => {
      if (observerRefValue) {
        enableBodyScroll(observerRefValue);
      }
    };
  }, []);

  function setImageUrlLarge(id) {
    return {
      backgroundImage: `url(${process.env.PUBLIC_URL}/assets/images/large/${id}.jpg)`
    }
  }

  return (
    <div ref = {modalRef} className = "modal-wrapper">
      <div className = "modal">
        <div className = {`detail ${id} overlay`} style = {setImageUrlLarge(id)}>
          <a className='overlay' rel='noopener'></a>
          <AirportDetails />
        </div>
      </div>
    </div>
  )
}

import { useParams, useNavigate, generatePath } from "react-router-dom";
import airportData from '../airports.json';

function randomAirportId() {
  const rand = Math.floor(Math.random() * airportData.length);
  return airportData[rand].id;
}

function AirportDetails() {
  const { id } = useParams();
  const navigate = useNavigate();

  const airport = React.useMemo(() => {
    return airportData.find(
      (airport) => airport.id.toLowerCase().includes(id.toLowerCase())
    );
  }, [id]);

  ...

  if (!airport) {
    return null; // or navigate back, etc.
  }

  return (
    <div className='container'>
      <div className='detail-info'>
        <h1>{airport.id}</h1>
        <h2>{airport.name}</h2>
        <h3><span className = "local_name">{airport.local_name}</span></h3>
        <h4>{data.city}</h4>
        <div className = "description fl-edu">
          <p dangerouslySetInnerHTML = {{ __html: em}}></p>
        </div>
        <a
          className = "random"
          role = "button"
          onClick = {() => {
            navigate(
              generatePath("/airport/:id", { id: randomAirport()}
),
              { replace: true }
            );
          }}
        >
          Random Airport
        </a>
        ...
      </div>
      <div className = "photo-credit">
        Photo by <a>{airport.imageCredit}</a>
      </div>
      ...
    </div>
  )
}

Чтобы повторно отобразить модальный компонент, вам необходимо обновить текущее состояние в модальном компоненте и передать это состояние нужному компоненту. В вашем проекте, который является компонентом AirportDetails, вам необходимо создать этот компонент отдельно и передать данные в « Детали аэропорта» от props.

В вашем родительском компоненте это означает, что там, где генерируются все эти данные, мы получаем уникальный идентификатор аэропорта,

const [currentAirportId, setCurrentAirportId] = useState(id);

Затем нам нужно обновить реквизиты данных,

        <div className = "modal">
            <div className = {`detail ${currentAirportId} overlay`} style = {setImageUrlLarge(currentAirportId)}>
                <a className='overlay' rel='noopener'></a>
                <AirportDetails id = {currentAirportId} airportData = {airportData} setReload = {randomAirport} />
            </div>
        </div>

Также нам нужно обновить функцию случайного аэропорта, чтобы установить «текущий идентификатор аэропорта».

  setCurrentAirportId(airportRandData.id);

ОК, теперь что касается отдельного компонента под названием AirportDetails, нам нужно получить отправляемые значения от родителя.

export function AirportDetails({ id, airportData, setReload }) {

Чтобы найти данные об аэропорте, вы можете повторно использовать свой метод,

const airport = airportData.find((airport) => airport.id.toLowerCase() === id.toLowerCase());

Также, чтобы поделиться своими ссылками, вы можете использовать window.open.

const share = (socialType) => (e) => {
    //
    window.open(link, '_blank');
};

Для перезагрузки вы можете добавить кнопку случайного аэропорта.

<a className = "random" role = "button" onClick = {() => setReload(prev => !prev)}>Random Airport</a>