Показать сообщение отдельно
  #5 (permalink)  
Старый 19.08.2019, 11:58
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 641

import React from 'react'

function ForecastItem({ town, data }) {
  return <React.Fragment>
    <div>
      {town} - {JSON.stringify(data)}
    </div>
    <hr />
  </React.Fragment>
}

function App() {

  const [forecast, setForecast] = React.useState({})

  const memoForecast = React.useMemo(
    () => {
      return Object.keys(forecast).map(forecastKey => (
        <ForecastItem
          key={forecastKey}
          town={forecastKey}
          data={forecast[forecastKey]}
        />
      ))
    },
    [forecast]
  )

  React.useEffect(
    () => {
      let towns = ["Sudak", "Yalta", "Kerch", "Feodosiya"];
      Promise.all(
        towns.map(town => fetch(`https://api.weatherbit.io/v2.0/current?city=${town}&key=ced73555abfb464ebcb5d7e77f5be270`)
          .then(res => res.json())
          .then(json => json.data))
      )
        .then(response => {
          setForecast(towns.reduce((acc, town, i) => {
            acc[town] = response[i]
            return acc
          }, {}))
        })
    },
    []
  )

  return memoForecast
}

export default App


если данные нужны глобально можно использовать https://reactjs.org/docs/context.html
Ответить с цитированием