Question

我正在学习ReactJS。在我的程序中，我正在进行API调用，并稍后对其进行映射。通过API调用获取的数据就像，数据= [{“ uid”：“ 1”，“ title”：“ hello”}，{“ uid”：“ 2”，“ title”：“世界”}]

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调用中打印数据，然后返回数据。使用setState分配归属组件中的数据。但是没有数据存储到this.state.data中。它始终保持未定义状态，并且出现错误“ TypeError：无法读取未定义的属性'map'”。

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

我会很感激。

Answer 1

您的代码中有两个问题。

首先，API.getData()是一个异步函数。这意味着当您调用API.getData()时，数据不会中间返回（想像要花费几毫秒的时间来获取数据）。提取数据后，您应该setState。

第二，您应该在render函数中发送渲染逻辑。

它应该像这样：

import React, { Component } from 'react'
import ImporterAPI from '../api'
const API = new ImporterAPI()

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

  componentWillMount() {
    API.getData().then(response => {
      console.log('Data fetched', response)
      this.setState({
        data: response
      })
    })
  }

  render() {
    return (
      <div className="home">
        {this.state.data.map((object, index) => (
          <p key={index}>{object}</p>
        ))}
      </div>
    )
  }
}

作为@Askiron的答案，您还应该在API函数中return axios....。

编辑2：这是更好的API，它会在错误情况下返回数据，因此您不会得到this.state.data is not a function：

import axios from 'axios'

class API {
  getData = () => {
    return axios
      .get('http://localhost:8005/data')
      .then(function(response) {
        if (response.status === 200 && response != null) {
          var data = response.data
          return data
        } else {
          throw new Error('Empty data')
        }
      })
      .catch(function(error) {
        console.log(error)
        return [] // Return empty array in case error response.
      })
  }
}

Answer 2

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

也不建议使用componentWillMount方法，因此我建议您将axios代码移动到类中的componentDidMount方法上。

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

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

像在下面的代码中一样，在axios .then和.catch中使用箭头功能，否则无法访问状态或道具。您需要绑定每个.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>
        )
    }
  }

ReactJS：从api获取数据并映射数据

2 个答案: