开发者问题收集

reactjs axios无法获取api数据

2019-09-25
765

我无法从 https://randomuser.me/api/ 获取我的 api 数据。

但是当我使用另一个 api 如 http://dummy.restapiexample.com/api/v1/employees 时,它可以工作。

错误:

在此处输入图片描述

import React from "react";
import "./App.css";
import Start from "./start";

function App() {
  return (
    <div className="App">
      <Start />
    </div>
  );
}

export default App;

start.js

import React, { Component } from "react";
import Axios from "axios";

class Start extends Component {
  constructor(props) {
    super(props);

    this.state = {
      results: []
    };
  }

  componentDidMount() {
    Axios.get("https://randomuser.me/api/").then(res => {
      const results = res.data;
      this.setState({ results });
      console.log(results);
    });
  }

  render() {
    return (
      <div>
        {this.state.results.map(result => {
          return <div>{result.id}</div>;
        })}
      </div>
    );
  }
}
export default Start;
3个回答

问题在于 http://dummy.restapiexample.com/api/v1/employees 返回数组,而 https://randomuser.me/api/ 返回对象。尝试更改为

componentDidMount() {
    Axios.get("https://randomuser.me/api/").then(res => {
      const results = res.data.results;
      this.setState({ results });
      console.log(results);
    });
  }
zhuber
2019-09-25

您必须使用 res.data.results。它来自结果对象。

Samet Karaca
2019-09-25

请检查您的 JSON 数据 最后一行,您错过了 http://dummy.restapiexample.com/api/v1/employees 中的“}]”拼写错误。

componentDidMount() {
    Axios.get("http://dummy.restapiexample.com/api/v1/employees").then(res => {
      const results = res.data;
      this.setState({ results: results });
    });
  }
Sugumar K
2019-09-25