Я пытаюсь использовать OpenWeather Rest API, но у меня возникают проблемы с доступом к информации о теле. Я использую Postman для тестирования, который работает, но не в моем коде, поэтому мне что-то не хватает.
Результаты почтальона: (я не показываю все содержимое тела, так как это не обязательно) конечная точка REST с запросами: api.openweathermap.org/data/2.5/weather?q=London, uk & APPID = < em> api-key-здесь
{
"coord": {
"lon": -0.13,
"lat": 51.51
},
"weather": [
{
"id": 500,
"main": "Rain"
}
],
"main": {
"temp": 290.38
},
"name": "London"
}
Конечная точка отлично работает с Postman.
Мой код:
import React, { useState, useEffect } from 'react';
Внутри моей функции LocalWeather:
Переменные:
const [weather, setWeather] = useState([]);
useEffect для запуска моего вызова выборки
useEffect(() => {
fetchData();
}, []); // Run once on load
Фактический вызов выборки:
const fetchData = async () => {
const res = await fetch(`api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${api-key`);
res.json()
.then(res => setWeather(res))
}
Затем я мог бы выйти из заголовков (что дает мне соответствующую информацию):
console.log(res);
Раньше мне приходилось добавлять следующее, потому что useEffect действует как componentDidMount и запускается после первоначального рендеринга.
if (!weather.length) {
return null;
}
Затем я бы попытался отобразить информацию, если я слежу за результатами Postman:
return (
<ul>
<li>{weather.weather[0].main}</li>
</ul>
);
Что мне не хватает очевидного, что мешает отображать информацию о теле?
Получение на консоли следующего сообщения, которое говорит мне, что на самом деле он не получает никакой информации. Неперехваченный (в обещании) SyntaxError: неожиданный токен ‹в JSON в позиции 0
Array(0)length: 0__proto__: Array(0). Также используется res.weather, упомянутый weiklr. 03.06.2020res.json()? Какой результат вы получите, если переключите.then(res => setWeather(res))на.then(res => console.log(res))? 03.06.2020<ul> <li>{openWeather.name}</li> <li>{openWeather.cod}</li> <li>{openWeather.id}</li> <li>{openWeather.timezone}</li> <li>{openWeather.dt}</li> <li>{openWeather.visibility}</li> <li>{openWeather.base}</li> </ul>Но я не могу попасть во вложенные элементы. weather [0] .main не работает. Есть ли строка или что-то, что мне не хватает для доступа к вложенным элементам? 03.06.2020const fetchData = async () => { const res = await fetch(api.openweathermap.org/data/2.5/weather?q = Лондон, Великобритания & APPID = $ {apiKey}); res .json() .then(res => { setWeather(res) console.log(res.weather) }) }04.06.2020weatherпри входе вres? 04.06.2020Promise {<pending>} __proto__: Promise [[PromiseStatus]]: "resolved" [[PromiseValue]]: undefined05.06.2020.then(res => console.log(res));возвращается undefined 05.06.2020Promise {<pending>} __proto__: Promise [[PromiseStatus]]: "resolved" [[PromiseValue]]: undefinedИ затем отображаются все результаты. 05.06.2020