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;

它还会给出错误 - Unhandled Rejection（TypeError）：无法读取未定义的属性'errorShow'。

Answer 1

<强>的变化：

1。您需要绑定this然后捕获回调方法，使用arrow functions。

2。您没有定义初始状态，使用this.state.person.data会导致错误。

3. 在状态或全局变量中存储UI不是一个好主意，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

当您在this.errorShow()内拨打function时，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

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

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

通常，您还可以使用=>函数语法，该语法从声明函数的作用域继承“this”，而不是使用全局作用域。 E.g。

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时，您的组件将不会重新呈现。

使用axios with react来从api获取数据

4 个答案: