如何使用 Axios 和 React 从 API 端点显示数据答案

【问题标题】：How to display data from API endpoint using Axios and React如何使用 Axios 和 React 从 API 端点显示数据
【发布时间】：2019-09-15 21:07:46
【问题描述】：

我目前正在学习本教程 - https://appdividend.com/2018/11/11/react-crud-example-mern-stack-tutorial/#React_CRUD_Example

我已经替换了自己的 API，并且成功地创建了新记录。我现在正在尝试查看所有记录的列表，但出现以下错误

这是代码（教程代码的精确副本，API 链接除外）



    import React, { Component } from "react";
    import axios from "axios";
    import TableRow from "./TableRow";

    export default class Index extends Component {
      constructor(props) {
        super(props);
        this.state = { address: [] };
      }
      componentDidMount() {
        axios
          .get("http://localhost:6505/api/v1/Address")
          // .then(res => console.log(res))

          .then(response => {
            this.setState({ address: response.data });
          })
          .catch(function(error) {
            console.log(error);
          });
      }
      tabRow() {
        return this.state.address.map(function(object, i) {
          return ;
        });
      }

      render() {...}

如果我在 '.then(res => console.log(res))' 上方注释掉的行中添加，错误消息将不再显示并且页面呈现但没有任何数据 - 请参见页面下方的屏幕截图和安慰。我已经突出显示了新的错误消息，并且还突出显示了我想要显示的数据。

任何指针都非常感谢:)

【问题讨论】：

tabRow 在哪里被调用？
你可以这样做。setState({address:response.data.results
@nivendha 嗨，tabRow 函数在内的 "render(){ return(" 之后调用
@lovepreetsingh 谢谢，这确实让我想到了，但似乎没有任何区别。不过我会把它留在代码中，因为我觉得我可能有不止一个问题。
您正在尝试映射不存在的东西。哟可以设置一个initialState地址=[]