Question

所以我有一个运行Axios请求的React组件，结果设置为我的＆＃39; ist＆＃39;状态属性，然后检查渲染。

我的问题是因为它是异步请求，所以第一次渲染检查会进入return <p>Loading...</p>;

我正在寻找一种方法让我的组件呈现加载，直到aync请求完成，然后呈现结果。

这是我的代码：

// defealts
import React from 'react';
import { Helmet } from 'react-helmet';
import axios from 'axios';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageName: 'Home',
      list: '',
    };
  }

  componentDidMount() {
    this.test();
  }

  test = () => {
    axios.get('https://api.myjson.com/bins/vqqml')
    .then((response) => {
      /* eslint-disable no-console */
      console.log(response);
      /* eslint-enable no-console */
      this.setState({ list: response.data });
    })
    .catch((error) => {
      /* eslint-disable no-console */
      console.log(error);
      /* eslint-enable no-console */
    });
  };

  render() {
    if (this.state.list.data) {
      return (
        <div>
          <p>{this.state.list.data.name}</p>
        </div>
      );
    }
    return <p>Loading...</p>;
  }
}

export default Home;

感谢任何帮助或建议 - 提前谢谢。

Answer 1

它不会呈现，因为this.state.list没有data属性，它有name，age和car属性。

您的API调用响应是：

{"name":"John","age":30,"car":null}

而不是

{"data":{"name":"John","age":30,"car":null}}

Answer 2

您可以在名为state的{{1}}中创建另一个属性，如果您收到回复，则将其设置为loaded。 true

然后在this.setState({ list: response.data, loaded: true });：

中提问

render

您必须提供if(this.state.loaded) {...}以检查response属性是否在其中。您可能会将data axios与其他类似的东西混淆，比如已经提到的@AndyGaskell

Answer 3

您可以尝试使用shouldComponentUpdate()

{"errors"=>[{"domain"=>"global", "reason"=>"backendError", "message"=>"Backend Error"}], "code"=>500, "message"=>"Backend Error"}

React - Axios数据在获取数据后不会呈现数据

3 个答案: