ReactJS:从api获取数据和 map 数据

Question

我正在学习ReactJS。在我的程序中，我正在进行 API 调用，然后对其进行映射。通过 API 调用获取的数据如下:数据 = [{"uid":"1", "title":"hello"},{"uid":"2", "title":"World"}]

import ImporterAPI from '../api';
const API = new ImporterAPI();

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
  }}

  componentWillMount() {
    this.setState({ data: API.getData()}, () => {
      console.log("data fetched");
      var mapData = []
      this.state.data.map( (object, i) => {
        mapData.push(<p key={i}>{object}</p>)
      })
  }) 
  }

  render() {
    return (
      <div className="home">
        {this.mapData}
      </div>
    )
  }
}

还有我的 API 文件，

import axios from 'axios';
class API {
  getData = () => {
    axios.get('http://localhost:8005/data')
    .then(function (response) {
      if (response.status === 200 && response != null) {
        var data = response.data;
        console.log(data)
        return data
      } else {
        console.log('problem');
      }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
}

我的 console.log 正在打印 API 调用的数据，然后返回数据。其中 home 组件数据是使用 setState 分配的。但是 this.state.data 中没有存储任何数据。它始终保持未定义状态，并且出现错误“TypeError:无法读取未定义的属性‘map’”。

请指导我。我应该如何打印 API 调用数据&我还想知道这个程序在进行 API 调用的性能方面是好还是坏，或者是否有其他更好的方法来提高性能。谢谢。

非常感谢您的帮助。

Answer 1

你真的需要另一个类来获取 api 数据吗？不需要

另外，componentWillMount 方法已被弃用，因此我建议您将 axios 代码移至类中的 componentDidMount 方法。

还使用空数组而不是字符串来初始化数据。并将api响应数据设置为state，即data

直接在渲染和显示数据中进行映射。

在 axios .then 和 .catch 中使用箭头函数，就像我在下面的代码中所做的那样，否则将无法访问状态或 Prop 。否则，您需要绑定(bind)每个 .then 和 .catch

您的代码可以简化如下

     class Home extends Component {
         constructor(props) {
            super(props);
            this.state = {
               data: []
            }
         }

      componentDidMount() {
          axios.get('http://localhost:8005/data')
            .then(response => {
                if (response.status === 200 && response != null) {
                  this.setState({
                       data: response.data
                  });
           } else {
             console.log('problem');
           }
      })
      .catch(error => {
          console.log(error);
      });
    }

    render() {
       const { data } = this.state;
       return (
          <div className="home">
            {Array.isArray(data) && data.map(object => (
                 <p key={object.uid}>{object.title}</p>
             ))}
          </div>
        )
    }
  }