Как отобразить данные из конечной точки API с помощью Axios и React

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