我正在尝试使用 Axios 从公共 API 获取数据,并显示我通过 React 应用程序获得的数据。但是当用户修改输入时,我无法在我的 componentDidUpdate() 中找到一个条件使其仅呈现一次。有人有想法吗?
这是我的代码:
import React, { Component } from 'react';
import axios from "axios";
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
input: "",
output: []
}
}
componentDidUpdate() {
axios.get(`https://geo.api.gouv.fr/communes?nom=${this.state.input}`)
.then(response => {
this.setState((prevState) => {
if (prevState.input !== this.state.input) {
return { output: response.data };
}
});
})
.catch(function (error) {
console.log(error);
})
}
handleInput = (event, input) => {
this.setState({input: event.target.value});
}
render() {
return …Run Code Online (Sandbox Code Playgroud)