React - Axios 数据一旦获取就不会呈现数据

Question

所以我有一个 React 组件，它是运行一个 Axios 请求，结果设置为我的 'ist' 状态属性然后在渲染上检查。

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

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

这是我的代码：

// 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 中创建另一个名为 loaded 的属性，如果收到响应，则将其设置为 true。 this.setState({ list: response.data, loaded: true });

然后在 render:

中提问

if(this.state.loaded) {...}

您必须提供 response 才能检查 data 属性是否在其中。您可能将 axios response.data 与@AndyGaskell 已经提到的其他内容混淆了

Answer 3

你可以尝试使用shouldComponentUpdate()

shouldComponentUpdate(){
     if (nextState. list == this.state.list) {
      return false;
     }
}

React - Axios 数据一旦获取就不会呈现数据

React - Axios data does not render the data once fetched

javascript

asynchronous

render

reactjs

axios