在React.JS中处理API调用的输入更改
在React.JS中处理API调用的输入更改
提问于 2021-01-03 00:49:07
我是React和JavaScript的新手，在这里我想根据各自的按钮获得国家/地区的结果(稍后会相应地更新API URL )。到目前为止，我设法让按钮工作，但这肯定不是正确的方式，因为在控制台中，我看到该组件将永远被调用。所以我想知道处理这种情况的正确方法是什么？
constructor(props) {
super(props);
this.state = {
res: "",
confirmedCases: 0,
targetCountry: "",
deathNumber: 0,
targetProvince: "",
userInput: "Azerbaijan"
};
}
componentDidUpdate(prevProps,prevState) {
if (this.state.userInput !== prevState.userID) {
fetch("https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country="+this.state.userInput, {
"method": "GET",
"headers": {
"x-rapidapi-key": "2f66132eeemsh16e2dd05b2ecd59p1ab765jsnc1f549cafc64",
"x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com"
}
})
.then(response => response.json()).then(data => {
this.setState({
res: data.data.lastChecked,
confirmedCases: data.data.covid19Stats[0].confirmed,
targetCountry: data.data.covid19Stats[0].country,
deathNumber: data.data.covid19Stats[0].deaths,
targetProvince: data.data.covid19Stats[0].province
})
console.log(data.data.covid19Stats[0].confirmed)
})
.catch(err => {
console.error(err);
});
}
}
handleChange = (target) =>{
this.setState({
userInput: target
});
}
render(){
return (
<div className="App">
<button onClick={(target) => this.handleChange("Azerbaijan", target)}>Azerbaijan</button>
<button onClick={(target) => this.handleChange("Russia", target)}>Russia</button>
<button onClick={(target) => this.handleChange("Turkey", target)}>Turkey</button>
Last Updated: {this.state.res}
<br></br>
Confirmed Cases: {this.state.confirmedCases}
<br></br>
Country: {this.state.targetCountry}
<br></br>
Number of Death: {this.state.deathNumber}
<br></br>
Province: {this.state.targetProvince}
</div>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-03 00:58:20
只需在handleChange函数中删除componentDidUpdate并添加fetch API即可。
使用componentDidMount获取默认数据。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
res: "",
confirmedCases: 0,
targetCountry: "",
deathNumber: 0,
targetProvince: "",
};
}
componentDidMount() {
this.handleFetch("Azerbaijan");
}
handleChange = (target) => {
this.handleFetch(target);
};
handleFetch = (target) => {
fetch(
"https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats?country=" +
target,
{
method: "GET",
headers: {
"x-rapidapi-key":
"2f66132eeemsh16e2dd05b2ecd59p1ab765jsnc1f549cafc64",
"x-rapidapi-host": "covid-19-coronavirus-statistics.p.rapidapi.com",
},
}
)
.then((response) => response.json())
.then((data) => {
this.setState({
res: data.data.lastChecked,
confirmedCases: data.data.covid19Stats[0].confirmed,
targetCountry: data.data.covid19Stats[0].country,
deathNumber: data.data.covid19Stats[0].deaths,
targetProvince: data.data.covid19Stats[0].province,
});
})
.catch((err) => {
console.error(err);
});
};
render() {
return (
<div className="App">
<button onClick={() => this.handleChange("Azerbaijan")}>
Azerbaijan
</button>
<button onClick={() => this.handleChange("Russia")}>
Russia
</button>
<button onClick={() => this.handleChange("Turkey")}>
Turkey
</button>
<hr/>
Last Updated: {this.state.res}
<br/>
Confirmed Cases: {this.state.confirmedCases}
<br/>
Country: {this.state.targetCountry}
<br/>
Number of Death: {this.state.deathNumber}
<br/>
Province: {this.state.targetProvince}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Stack Overflow用户
发布于 2021-01-03 01:05:06
在处理更改函数中，您将目标设置为userInput，它应该是target.target.value，这听起来很奇怪，所以您可能需要将以前的target更改为event
event.target.value是很常见的。
还可以看看钩子和函数组件，您可以丢弃这里的大部分代码，用相同的功能替换它，但代码更少。
Levelup tutorials有很好的内容，我推荐它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65541630
复制相关文章
相似问题
腾讯云开发者
