ReactJS：从api和地图数据获取数据

我在学英语。在我的程序中，我正在进行一个API调用，然后映射它。 API调用获取的数据如下：， 数据=[{“uid”：“1”，“title”：“hello”}，{“uid”：“2”，“title”：“World”}]

我的console.log正在打印来自API调用的数据，然后返回数据。其中，使用setState指定主元件数据。但是没有数据存储到此.state.data中。它始终保持未定义状态，我得到错误“TypeError:无法读取未定义的属性“map”

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

---

非常感谢您的帮助。

您的代码中有两个问题

首先，

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>
    )
  }
}

---

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

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

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

直接在渲染和显示数据中进行贴图

在axios.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>
        )
    }
  }

class Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
componentDidMount（）{
axios.get（）http://localhost:8005/data')
。然后（响应=>{
if（response.status==200&&response！=null）{
这是我的国家({
数据：response.data
});
}否则{
console.log（“问题”）；
}
})
.catch（错误=>{
console.log（错误）；
});
}
render（）{
const{data}=this.state；
返回(
{Array.isArray（数据）&&data.map（对象=>(
{object.title}
))}
)
}
}

您错过了

axios

之前的

返回。只需在
axios
前面添加
return
，就像这样
return-axios
，它就会工作。我认为响应是一个JSON对象，所以map函数不会工作。你能在这里发布你的样本回复数据吗？@kumark。。。我的控制台打印响应数据->（2）[0:{“uid”：“1”，“title”：“hello”}1:{“uid”：“2”，“title”：“World”}]感谢您的回复：）。。。。在遵循您的步骤之后，我得到了这个错误“TypeError:this.state.data.map不是一个函数”，并且在API组件控制台中，console.log打印了两次数据…类似地，console.log在Home组件中打印了两次数据。抱歉。首先应该将数据状态初始化为空数组。我编辑了我的代码。过来看！在API中，您应该在错误情况下返回数据。认为
API.getData（）
就像一个函数，获取输入并返回输出。如果出现错误，您似乎不会返回任何数据。我会更新我的答案，希望你能理解更多，能解决你所有的问题。你的控制台打印数据两次，是因为在
API.getData（）
中打印一次，在你获取数据时在React组件中打印一次。因此，我删除了
API.getData（）
中的
console.log
。我在Home.render中遇到了相同的错误。。。“TypeError:无法读取未定义的属性'map'：）我收到此错误“TypeError:data.map不是函数”我更新了答案。请现在试一试。但是确保api返回数据，即console.log（response.data）；应在axios success Response中打印对象数组我未找到“”404，另一个错误请求失败。但在此错误之前，我得到了映射错误“uncaughttypeerror:data.Map不是函数”，这意味着api url不正确。检查您的后端api路径。如果您提供到axios.get的正确路径，那么代码将按预期工作我修复了它并获得了。。。。“未捕获（承诺中）类型错误：res.json不是函数”
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>
    )
  }
}

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.
      })
  }
}

     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>
        )
    }
  }