JavaScript类没有被调用，也没有发生任何事情

Question

我对JavaScript很陌生。我尝试使用reactJS来学习JavaScript。在这里，我尝试使用API开发一个天气应用程序。但这并没有奏效。我能知道那个代码出了什么问题吗。

class retrieveApi extends React.Component {
constructor() {
super();
window.alert("here");
this.state = {
temp: "",
ret: "",
};
var Http = new XMLHttpRequest();
const url =
"http://api.openweathermap.org/data/2.5/forecast?appid=API_KEY&q=california";
Http.open("GET", url);
Http.send();
window.alert("here");
Http.onreadystatechange = (e) => {
if (Http.readyState == 4) {
this.setState({
ret: Http.responseText,
});
var obj = JSON.parse(this.state.ret);
window.alert(obj.cod);
}
};
}
render() {
return <p className="main-temp text-shadow">{this.state.temp}</p>;
}
}

在我的应用程序((函数中，我这样调用了那个类。

return <div>
<retrieveApi></retrieveApi>
</div>

我把那个类叫做标签。是这样吗？在我尝试创建时钟之前，我使用了相同的时钟，所以我使用了这样的时钟。如果有问题，请纠正。

当我使用这些东西时，没有任何东西出现或改变。请帮帮我！

Answer 1

首先确保导出了retrieveApi类，并将其正确导入到应用程序组件中。假设你的应用程序组件是一个功能性的组件，这是呈现组件的正确方式：

return ( <div> <RetrieveApi></RetrieveApi></div> )

注意这些问题

同样像上面提到的，请确保将类组件大写。更改：

class RetrieveApi

而不是

class retrieveApi

Answer 2

类的名称应以大写字母开头。应该是RetrieveApi。

Answer 3

我认为您没有导出类retrieveApi。这样导出你的类：

export default retrieveApi;