Блог

Главная - Вопросы по программированию - axios.ошибка получения при использовании метода axios.create с использованием baseUrl

axios.ошибка получения при использовании метода axios.create с использованием baseUrl

#reactjs #get #axios #httprequest

#reactjs #получить #axios #httprequest

Вопрос:

Я попытался создать приложение из случайного пользовательского API в react и использовал библиотеку axios для HTTP-запросов.Я создал отдельный файл для базового API с помощью axios.create, и код файла выглядит следующим образом,

 import axios from 'axios'

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com`,
});

Затем я использовал это в другом файле, чтобы сделать запрос GET и сохранить данные в state on componentDidMount, чтобы я мог получить доступ к данным в пользовательском интерфейсе.

 import React from "react";
import API from "../api";
export default class PersonList extends React.Component {
  state = {
    persons: []
  };
  componentDidMount() {
    API
      .get('/').then((data) => {
      const persons = data.data;
      this.setState({ persons });
      console.log(this.state.persons);
    });
  }
  render() {
    const { persons } = this.state;
    console.log('Stato',persons)
    return (
      <ul>
        {persons.map((person) => (
          <li key={person.id}>{person.name}</li>
        ))}
      </ul>
    );
  }
}

Но это не работает, потому что состояние не заполнено данными пользователей, поэтому функция .map() выдает ошибку.

Ответ №1:

Вы сталкиваетесь с этой ошибкой из-за используемого вами URL-адреса. В вашем примере вы используете https://jsonplaceholder.typicode.com в качестве конечной точки in componentDidMount , но это не вернет никаких пользовательских данных-заполнителей. Я полагаю, вы имели в виду использовать https://jsonplaceholder.typicode.com/users вместо этого.

У меня есть рабочий пример здесь: https://codesandbox.io/s/axios-instance-ki9g6 . Обратите внимание , что мне нужно было только переодеться / в componentDidMount /users .

Комментарии:

1. В качестве последующего предложения, использование чего-то вроде lodash или ramda может помочь устранить ошибки, вызванные, map если список, который вы пытаетесь перебрать, не имеет ожидаемой формы. Конечно, это не устраняет вашу реальную проблему, но может сократить количество ошибок, которые возникают у вас на лице. Я соответствующим образом обновлю свою песочницу, чтобы показать пример этого.

2. Нет проблем. Рад, что смог помочь!