javascript - React - Axios 数据一旦获取就不会渲染数据

Question

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

我的问题是，因为它是异步请求，所以第一次渲染检查会进入 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}}