使用 axios 和 react 从 api 获取数据

Question

我正在尝试使用 axios 从 api (https://reqres.in/) 获取数据并显示在我的反应应用程序中。在此之前，我使用 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

变化：

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

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

3. 将 UI 存储在 state 或 global 变量中不是一个好主意，ui 部分应该只在 render 方法中。

这样写：

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

Answer 2

当您在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 3

试试这个：

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

使用arrow functions 保留this 的正确范围

Answer 4

问题在于then 和catch 回调中的this 不是指您的类，而是指默认（全局）范围。你需要绑定正确的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 时，您的组件将不会重新渲染。