React - 使用 axios 获取数据

Question

在我基于类组件的react应用程序中，我的响应API在几次滞后后从开放天气修复中获得。 这就是我的状态

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      weatherData: undefined,
      weatherDescription: undefined,
    };
  }

我的想法是，当我的 componentDidMount 时， 天气 API 从 openWeather 获取并将其设置为状态

  componentDidMount() {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=someCityId&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)

我想在城市变化时更新数据，在 componentDidUpdate 中再次从 openWeather

获取数据

componentDidUpdate() {
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=someCityId&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)

  }

但问题是，当我的响应收到时，它面临着滞后，导致数据多次跳转到以前的数据和新数据，直到它修复

Answer 1

我不完全理解这个问题，但是这个“滞后”是因为从外部源获取某些内容的操作是异步的并且需要时间才能完成。

对于显示加载文本的第二个“部分”，您必须设置一个变量（最好处于指示该组件加载状态的状态）

例如。

 constructor(props) {
    super(props);
    this.state = {
       loading: false,
       airConditionsText: null,
       // Other stuff you have in state
    };
  }

  componentDidUpdate() {
    this.setState({loading: true}) // Start of loading
    axios
      .get(
        `http://api.openweathermap.org/data/2.5/weather?id=${this.state.inputId}&units=metric&appid=myApiKey`
      )
      .then((response) => {
        if (response.request.status === 200) {
            this.setState({
              weatherData: response.data.main.temp,
              weatherDescription: response.data.weather[0].description,
              weatherTextDisplay: this.state.airConditionsText.filter((item)=>{
                return item["id"] === response.data.weather[0].id
              })
            });
        }else{throw Error('No internet')}
      })
      .catch(error => Error.message)
      .finally(() => this.setState({loading: false})) // End of loading

一旦异步操作（从weatherAPI获取数据）以错误或成功完成，

.finally

就会被触发，这是停止加载的时间。

然后你可以在组件渲染中使用

this.state.loading

来显示加载文本 例如。

  render() {
    return (
        <div>
          {this.state.loading 
            ? <div> Loading... </div> 
            : <div>{this.state.airConditionsText}</div> // other stuff you want to display
          } 
        </div>
    );
  }