Блог

Я создаю веб-приложение для поиска укрытий с простым API в качестве проекта, я сопоставляю массив убежищ и создаю файл ShelterCard , содержащий основную информацию об этом, у меня была идея, и в API есть много данных, которые останутся неиспользованными, поэтому я хотел реализовать какой-то типэто onClick приведет вас к более крупному компоненту с дополнительной информацией о конкретном убежище, я раньше этого не делал, поэтому я не уверен, как реализовать эту функциональность. Моя идея могла бы использовать что-то вроде идентификатора shelter в параметрах, а затем использовать его с ShelterProfile для отображения полной информации. До сих пор я не мог даже console.log что-то делать, когда я нажимаю на каждую карту, поэтому сначала мне нужно знать, как это реализовать onClick . Я использую react-router для маршрутов и react-query для извлечения данных. Я открыт для любых других идей по подходу к этому.

 export const ShelterComponent = () => {
    const history = useHistory()
    console.log(history)
    async function fetchData() {
        const response = await fetch(SHELTER_URL)
        const data = await response.json()
        return data
    }
    const {status, data, error} = useQuery("shelter", fetchData)
    // const {features} = data
    if(status==="loading"){return <p>Loading </p>}
    if(error) return <p>something went worng...</p>
    if(data)
    return (
        <>         
     {data.features.map((shelter, i)=> {  
           return <ShelterCard key ={i} shelter={shelter}/>
       })}
    </>
    )
} 
  

Похоже, вы хотите реализовать что-то вроде домашнего экрана Netflix. при нажатии на любую карточку фильма открывается всплывающее окно большего размера с дополнительной информацией о том же фильме или сериале.

вместо перенаправления на другую страницу вот что вы можете сделать. поддерживайте одно состояние selectedShelterId и изначально установите для него значение «false».

 const [selectedShelterId,setSelectedShelterId]=useState(false)
  

добавьте onClick ко всем картам, и всякий раз, когда пользователь нажимает на любую карту, установите selectedShelterId на идентификатор убежища, который находится на карте убежища.

  {data.features.map((shelter, i)=> {  
       return (
              <div onClick={()=>setSelectedShelterId(shelter.id)}> 
                 <ShelterCard key ={i} shelter={shelter}/>
              </div>
              )
       })}
  

создать на компонентах (например. ShelterInfoPopup), где вы можете передать этот selectedShelterId в качестве реквизита, и с этим идентификатором вы можете вызвать API, чтобы получить и отобразить информацию о убежище по своему усмотрению.

и сделайте этот компонент ShelterInfoPopup фиксированным в верхней части страницы, и он должен открываться только при наличии selectedShelterId.

 {selectedShelterId amp;amp; <ShelterInfoPopup shelterID={selectedShelterId}/>}
  

и добавьте один крест или какую-то опцию во всплывающем окне, которая может закрыть всплывающее окно. для этого вам нужно установить selectedShelterId как false .

вы можете использовать useEffect и параметры запроса, чтобы сделать его более динамичным и сохранить selectedShelterId в параметрах запроса. чтобы открыть страницу с уже открытым всплывающим окном.