Компоненты, вызываемые API, не будут отображаться
Я создаю приложение в React. Я новичок в React, поэтому, пожалуйста, потерпите меня. Этот вопрос очень прост. Я создаю три компонента, которые вызываются API (я использую axios для вызова API), но они просто не отображаются. Я не уверен, что я делаю неправильно.
import React, { Component } from "react";
import axios from "axios";
class Temperature extends Component {
showTemperature = () => {
let apiKey = "4cc79448ae57aa2b8557ec4dcd604fac";
let city = "Lisbon,pt";
let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
axios.get(url).then(function(response) {
let temp = Math.round(response.data.main.temp);
return temp;
});
};
render() {
return <div>{this.showTemperature()}</div>;
}
}
export default Temperature;
а затем я вызываю компонент на App.js
<div>
<Temperature />
</div>
внутри функции приложения. Ничего не отображается, когда я вызываю компонент. Есть советы или что я делаю не так? Спасибо.
PS: я импортирую компоненты в приложение:
import Temperature from "./Temperature";
Обновлено: я хочу добавить, что у меня есть такое же приложение, сделанное в ванильном JavaScript, и API работает нормально.
Я пробовал обычный текст, он отлично отображается!
Ну, вы должны использовать состояние в первую очередь. Вы должны инициализировать переменную состояния для температуры, а затем использовать setState, чтобы сохранить значение вызова API в вашем состоянии. Затем вы бы вызвали состояние вместо this.showTemperature()
Спасибо, я попробую это!
@mfs Проблема с ключом API, он дает такой ответ, как {"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."} при попытке URL (api.openweathermap.org/data/2.5/…)
Вы должны удалить $ из параметров, так что api.openweathermap.org/data/2.5/… работает нормально, поэтому я не понимаю, почему мой вызов не работает
Ответы 3
Вы должны импортировать температуру в App.js, как это
import Temperature from 'path'Что ты имеешь в виду? Я импортирую температуру в приложение вот так import Temperature from "./Temperature";
Да! Попробуй это.
Попробуйте использовать состояние для хранения значения температуры, например:
import React, { Component } from "react";
import axios from "axios";
class Temperature extends Component {
constructor(props) {
super(props);
this.state = {
temp: 'Error' // Add default value to help determine if error is api call.
};
this.showTemperature = this.showTemperature.bind(this); // Bind 'this' context
}
showTemperature() { // This is how to properly declare a method in react.
let apiKey = "4cc79448ae57aa2b8557ec4dcd604fac";
let city = "Lisbon,pt";
let url = `https://api.openweathermap.org/data/2.5/weather?
q=${city}&appid=${apiKey}&units=metric`;
axios.get(url).then(function(response) {
let temp = Math.round(response.data.main.temp);
if (temp) { // Don't setstate if temp is undefined.
this.setState({temp: temp}); // Set your state
}
});
};
componentDidMount() {
this.showTemperature(); // Call your method on mount.
}
render() {
return <div>{this.state.temp}</div>;
}
}
export default Temperature;
Я добавил комментарии, чтобы объяснить дальнейшие ошибки в вашем коде. Отсюда вы сможете гораздо лучше устранять неполадки.
Большое спасибо за Вашу помощь. Однако я получаю сообщение об ошибке после компиляции «TypeError: Cannot set property temp» of undefined» со строкой this.state.temp = ' ';
@mfs мои извинения, я отредактировал код с исправлением, я использовал неправильный синтаксис
Большое спасибо за ваши усилия. Это все еще не рендеринг, что означает, что это, вероятно, проблема с API, а не с кодом.
@mfs Я бы согласился :) Тем не менее, я рекомендую вам принять этот шаблон кодирования.
Я использовал значение по умолчанию, и оно отображается без проблем, поэтому проблема связана с вызовом API. Спасибо за помощь!
Я отредактировал код, и вы можете найти его в КодПесочница.
Ваш метод showTemperature возвращает значение undefined. Вот почему он ничего не отображает.
Вы пытались отобразить простой текст, чтобы увидеть, не является ли это проблемой с вашим вызовом API?