使用 axios 和 react 从 api 获取数据

Question

我正在尝试使用 axios 从 api (https://reqres.in/) 获取数据并显示在我的 React 应用程序中。在此之前，我使用 javascript 中的 fetch 方法从 API 中获取数据。现在我尝试从各种资源中对此进行编码。我该怎么办。方法正确吗？

我的app.js文件-

import React, { Component } from 'react';
import './App.css'; 
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
  this.successShow = this.successShow.bind(this);
  this.errorShow = this.errorShow.bind(this);
}
componentDidMount() {
 axios.get('https://reqres.in/api/products/3')
   .then(function (response) {
     this.successShow(response);
   })
   .catch(function (error) {
     this.errorShow(error);
   });
 }
successShow(response) {
 this.member = <pre>{JSON.stringify(response.data, null, '\t')}</pre> ;
}
errorShow(error) {
 this.member = <pre>{JSON.stringify(error.response.data, null, '\t')}</pre>;
}
render() {
  return (
    <div>
      <h2>Welcome to React</h2>
      <h3>{JSON.stringify(this.state.person.data)}</h3>
      <div>{this.member}</div>
    </div>
  );
  }
 }
export default App;

它还给出错误 - 未处理的拒绝（TypeError）：无法读取未定义的属性 'errorShow'。

Answer 1

当您在function 中调用this.errorShow() 时，this 不是您的组件对象，而是function 的上下文。您应该改用箭头函数，箭头函数不会创建自己的 this 因此您可以访问您的组件 this:

componentDidMount() {
 axios.get('https://reqres.in/api/products/3')
   .then((response) => {
     this.successShow(response);
   })
   .catch(error) => {
     this.errorShow(error);
   });
 }

More info about arrow functions

Answer 2

试试这个：

componentDidMount() {
 axios.get('https://reqres.in/api/products/3')
   .then((response) => {
     this.successShow(response);
   })
   .catch((error) => {
     this.errorShow(error);
   });
 }

使用arrow functions保留this

的正确范围

Answer 3

问题是您的 then 和 catch 回调中的 this 不是指您的 class，而是默认的（全局）范围。你需要绑定正确的this。您实际上已经使用此绑定设置了适当的功能，因此您可以直接使用它们：

componentDidMount() {
  axios.get('https://reqres.in/api/products/3')
   .then(this.successShow)
   .catch(this.errorShow);
}

一般来说，您也可以使用 => 函数语法，它从函数声明的范围继承 'this'，而不是使用全局范围。例如

componentDidMount() {
  axios.get('https://reqres.in/api/products/3')
   .then(success => this.successShow(success))
   .catch(error => this.errorShow(error));
}

（注意 => 函数在这里当然是完全不需要的）。

你还有一个额外的问题，就是你需要将 member 存储在组件状态 (this.state.member) 中，而不仅仅是作为一个字段，并使用 setState 函数来更新它。否则，当您更新 member.

时，您的组件将不会重新呈现

Answer 4

变化：

1. 你需要绑定this 和 then 并捕获回调方法，使用 arrow functions.

2.你没有定义初始状态，使用this.state.person.data会报错。

3. 将 UI 存储在状态或全局变量中不是一个好主意，ui 部分应该只在渲染方法中。

这样写：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            person: {}
        }
        //this.successShow = this.successShow.bind(this);
        //this.errorShow = this.errorShow.bind(this);
    }

    componentDidMount() {
        axios.get('https://reqres.in/api/products/3')
        .then((response) => {
            this.successShow(response);
        })
        .catch((error) => {
            this.successShow(error);
        });
    }

    successShow(response) {
        this.setState({
            person: response.data
        });
    }

    render() {
        return (
            <div>
              <h2>Welcome to React</h2>
              <h3>{JSON.stringify(this.state.person.data)}</h3>

              <pre>{JSON.stringify(this.state.person.data)}</pre>

              <div>{this.member}</div>
            </div>
        );
    }
}

使用 axios 和 react 从 api 获取数据

use axios with react to get data from api

javascript

reactjs

axios