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

avatar
calveeen
9 августа 2021 в 02:08
158
1
3

У меня есть простое приложение, которое вызывает API погоды и отображает его в дочернем компоненте.

App.js

import './App.css';
import { useState, useEffect } from 'react'
import { Forecast } from './forecast'
import Card from './components/Card'

function App() {
  const apiURL = "https://weather.cc.api.here.com/weather/1.0/report.json?apiKey=XXXXX&product=forecast_7days&name=Berlin"
  const [weatherCards, setCards] = useState([])

  useEffect(() => {
    const getWeather = async() => {
      var forecastList = []
      const res = await fetch(apiURL)
      const data = await res.json()
      const forecasts = data.forecasts.forecastLocation.forecast
      for (let i = 0; i < 5; i++) {
        let iconLink = forecasts[i].iconLink
        let iconName = forecasts[i].iconName
        let utcTime = forecasts[i].utcTime
        let temperature = forecasts[i].temperature
        let forecast = new Forecast(iconLink, iconName, utcTime, temperature)
        forecastList.push(forecast)
        //console.log(forecastList)
      }
      setCards(forecastList)
    }
    getWeather()
  
  }, [])


  return (
    <div >
      <h1>My Weather dashboard</h1>
      <div className="container">
          <Card props={weatherCards[0]} />
      </div>
    </div>
  )
}
export default App;

Card.js

const Card = ( props ) => {
    return (
        <div className="card">
            <img src={props.iconLink}/>
            <div className="caption">{props.iconName}</div>
            <h3>Day: {props.day}</h3>
            <h3>time: {props.time}</h3>
            <h3>temperature: {props.temperature}</h3>
        </div>
    )
}

Forecast.js

export class Forecast {
    constructor(iconLink, iconName, utcTime, temperature) {
        this.iconLink = iconLink
        this.iconName = iconName
        this.utcTime = utcTime
        this.temperature =temperature
    }
}

Однако компонент "Моя карта" не отображает атрибуты объекта "Прогноз". Я не уверен, что я делаю неправильно? Код кажется очень простым.

Источник
Drew Reese
9 августа 2021 в 02:10
0

В чем проблема, кроме того, что вы получите доступ к X из undefined при начальном (* и любом последующем) рендеринге до тех пор, пока не будет заполнено состояние weatherCards? Или это только оно?

calveeen
9 августа 2021 в 02:13
0

Несмотря на то, что я устанавливаю состояние карты в UseEffect, переменная weatherCards не обновляется независимо от того, как долго я жду. Я хочу иметь возможность передавать реквизиты компоненту Card, когда данные будут готовы.

Drew Reese
9 августа 2021 в 02:16
0

Что делает let forecast = new Forecast(iconLink, iconName, utcTime, temperature)?

calveeen
9 августа 2021 в 02:17
0

Он создает новый класс Forecast, который я определил. я обновил в посте

Drew Reese
9 августа 2021 в 02:20
0

Я думаю, что у Viet есть ответ ниже, но почему бы просто не setCards(data.forecasts.forecastLocation.forecast.slice(0,5)) и не на этом остановиться, цикл for и класс Forecast являются посторонними и ненужными.

calveeen
9 августа 2021 в 02:20
0

Думаю, вы правы, так намного лучше. Я думаю, что создал класс прогноза, потому что не все атрибуты объекта, которые возвращаются из API, будут использоваться.

Ответы (1)

avatar
Viet
9 августа 2021 в 02:15
4

Вы передаете имя реквизита props, поэтому вам нужно использовать props.props.iconLink в компоненте Card.

ИЛИ вы можете передать реквизит следующим образом:

<Card {...weatherCards[0]} />