Взаимодействие React и сторонним API?

Question

[Ilya Vegner]

Добрый день!
Пишу Weather App на React.В качествен Weather API взял OWM, столкнулся с такой проблемой, что React не правильно обрабатывает запрос

onChangeWeather(){
		fetch(`api.openweathermap.org/data/2.5/forecast/?q=${this.state.value}&cnt=1&APPID=e94f24c463ec7a0d1a69ebdebc88c694&lang=ru`)
			.then( (result) => {
				console.log(result);
			})
	}

При нажатии на кнопку срабатывает этот код ^
В попытке вывести результат выходит это
Либо я не правильно обрабатываю данные, либо что-то другое
Я в React новичок и не могли бы вы подсказать как можно сделать взаимодействие стороннего API с React

Comments

[Роман Александрович]

раскройте responce и покажите что там дальше

[Ilya Vegner]

Роман Александрович,

[Роман Александрович]

Ilya Vegner,

fetch(`api.openweathermap.org/data/2.5/forecast/?q=${this.state.value}&cnt=1&APPID=e94f24c463ec7a0d1a69ebdebc88c694&lang=ru`)
    .then((response) => response.json())
    .then((responseJson) => {
      console.log( responseJson.movies);
    })
    .catch((error) => {
      console.error(error);
    });

[Ilya Vegner]

Роман Александрович, Блин, он не хочет его парсить

Answer 1

[Антон Спирин]

1. Вы не указали протокол(http в вашем случае). Поэтому ответ получаете не от API OWM, а от своего localhost:3000. Если бы вы внимательно посмотрели на свойство url в консоли, на вкладке network или хотя бы на своем скриншоте, вы бы это заметили.
2. Ответ надо парсить методом res.json(). Но без указания протокола это бесполезно. Так как ваш localhost:3000 судя по статусу 200 возвращает html с приложением. Отсюда ошибка:

SyntaxError: Unexpected token < in JSON at position 0

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

Исправленный вариант:

fetch(`http://api.openweathermap.org/data/2.5/forecast/?q=${this.state.value}&cnt=1&APPID=e94f24c463ec7a0d1a69ebdebc88c694&lang=ru`)
      .then(res => res.json())
      .then(json => console.log(json));

Answer 2

[Mikhail Osher]

Причем тут React, если Вы некорректно Fetch API используете?
RTFM.

Answer 3

[msdos-x86]

иногда надоедает каждый раз делать res.json(), попробуй установить axios, там и возможностей побольше и не придется вручную в json форматировать