axios.get 使用 baseUrl 使用 axios.create 方法时出错

Question

我尝试在 React 中从随机用户 API 创建一个应用程序，我使用 axios 库进行 HTTP Requests.I 使用 [=22= 为基础 API 创建了一个单独的文件] 文件代码为，

import axios from 'axios'

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

然后我在另一个文件中使用它来发出 GET 请求并将数据存储在 componentdidMount 上的 state 中，这样我就可以访问 UI 中的数据。

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() 函数抛出错误。

Answer 1

您遇到此错误是因为您正在使用 URL。在您的示例中，您使用 https://jsonplaceholder.typicode.com 作为 componentDidMount 中的端点，但这不会 return 任何占位符用户数据。我相信您打算改用 https://jsonplaceholder.typicode.com/users。

我这里有一个工作示例：https://codesandbox.io/s/axios-instance-ki9g6。请注意我只需要将 componentDidMount 中的 / 更改为 /users.

axios.get 使用 baseUrl 使用 axios.create 方法时出错

axios.get ERROR on using axios.create method by using baseUrl

get

httprequest

reactjs

axios