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

Question

我目前正在阅读本教程-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））'上方添加注释的行，则不再显示错误消息，并且页面呈现但没有任何数据-请参见下面的屏幕截图和安慰。我突出显示了新的错误消息，还突出显示了我要显示的数据的位置。

非常感谢任何指针：）

Answer 1

您的数据在response.data.results中，因此将其更改为该数据即可使用。

谢谢

Answer 2

.map函数仅在数组上可用。

数据似乎与您期望的格式不符。

您能否尝试安慰response.data或response.data.results。

您可以将this.setState({ address: response.data });替换为this.setState({ address: response.data.results });