#javascript #arrays #reactjs #react-hooks
Вопрос:
Я создаю простое приложение для погоды на основе api
В начале функциональной составляющей я заявляю об этом
const [pressure, setPressure] = useState("")
const [hourTemp, setHourTemp] = useState([])
Затем я загружаю объект данных из api с помощью функции fetch() и присваиваю значения состоянию.
Давление(например) — это одно значение, но в моем приложении мне нужен почасовой прогноз, поэтому я беру весь часовой массив и фильтрую его (у него 48 часов, а мне нужно всего 10).
setPressure(data.current.pressure)
let newArray = data.hourly.filter(a => {
return data.hourly.indexOf(a) < 10
})
После создания newArray я могу console.log 
его, и он печатает массив из 10 объектов именно так, как я хочу.
Но когда я назначаю этому массиву состояние
setHourTemp(newArray)
а затем передайте элемент в качестве реквизита, он возвращает неопределенный
<WeatherBlock temp={hourTemp[0].temp}/> //TypeError: hourTemp[0] is undefined
Комментарии:
1. Вы проверяете, является ли hourTemp пустым или нулевым перед рендерингом?
Ответ №1:
Поскольку вы используете fetch асинхронную функцию, для загрузки данных требуется время. Когда вы вызываете / визуализируете данные в первый раз hourTemp[0] , они все еще пусты, и они возвращают неопределенную ошибку. Поэтому вам нужно проверить, существуют ли данные или нет. Есть много способов сделать это:
- Использование троичного выражения
<WeatherBlock temp={hourTemp[0] ? hourTemp[0].temp : 0}/>
- Используя условный рендеринг, вы используете if else перед возвратом
if(hourTemp[0]){
return <WeatherBlock temp={hourTemp[0].temp}/>
} else {
return <WeatherBlock temp={0}/>
}
Ответ №2:
Попробуйте добавить пустую/нулевую проверку, чтобы проверить, является ли ваш массив допустимым.
Есть много способов сделать это, но чтобы проверить:
{hourTemp ? <WeatherBlock temp={hourTemp[0].temp}/> : <></> }