Javascript 使用axios和react从api获取数据
我正在尝试使用axios从api（）获取数据并显示在我的react应用程序中。在此之前，我使用javascript中的fetch方法从API获取数据。现在我试着从各种资源中编写这个代码。我该怎么做呢。这是正确的方法吗 我的app.js文件-Javascript 使用axios和react从api获取数据,javascript,reactjs,axios,Javascript,Reactjs,Axios,我正在尝试使用axios从api（）获取数据并显示在我的react应用程序中。在此之前，我使用javascript中的fetch方法从API获取数据。现在我试着从各种资源中编写这个代码。我该怎么做呢。这是正确的方法吗 我的app.js文件- import React, { Component } from 'react'; import './App.css'; import axios from 'axios'; class App extends Component { constr
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;
import React，{Component}来自'React'；
导入“/App.css”；
从“axios”导入axios；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.successShow=this.successShow.bind（this）；
this.errorShow=this.errorShow.bind（this）；
}
componentDidMount（）{
axios.get（）https://reqres.in/api/products/3')
.然后（功能（响应）{
此。成功显示（响应）；
})
.catch（函数（错误）{
这个.errorShow（错误）；
});
}
successShow（响应）{
this.member={JSON.stringify（response.data，null，'\t'）}；
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then((response) => {
this.successShow(response);
})
.catch(error) => {
this.errorShow(error);
});
}
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then((response) => {
this.successShow(response);
})
.catch((error) => {
this.errorShow(error);
});
}
}
错误显示（错误）{
this.member={JSON.stringify（error.response.data，null，'\t'）}；
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then((response) => {
this.successShow(response);
})
.catch(error) => {
this.errorShow(error);
});
}
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then((response) => {
this.successShow(response);
})
.catch((error) => {
this.errorShow(error);
});
}
}
render（）{
返回(
欢迎反应
{JSON.stringify（this.state.person.data）}
{this.member}
);
}
}
导出默认应用程序；
它还提供错误-未处理拒绝（TypeError）：无法读取未定义的属性'errorShow'。当调用
函数内部的this.errorShow（）
时，此
不是您的组件对象，而是函数的上下文。您应该改用箭头函数，箭头函数不创建自己的此
，因此您可以访问组件此
：
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then(this.successShow)
.catch(this.errorShow);
}
当调用函数内部的this.errorShow（）
时，此
不是您的组件对象，而是函数的上下文。您应该改用箭头函数，箭头函数不创建自己的此
，因此您可以访问组件此
：
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then(this.successShow)
.catch(this.errorShow);
}
试试这个：
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then(success => this.successShow(success))
.catch(error => this.errorShow(error));
}
使用箭头功能
保持此
的正确范围尝试以下操作：
componentDidMount() {
axios.get('https://reqres.in/api/products/3')
.then(success => this.successShow(success))
.catch(error => this.errorShow(error));
}
使用箭头函数
保持this的正确作用域问题在于中的this
调用和catch
回调并不指向类，而是指向默认（全局）作用域。你需要把右边的绳子绑起来。实际上，您已经使用此绑定设置了相应的函数，因此您可以直接使用它们：
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>
);
}
}
通常，您还可以使用=>
函数语法，该语法从声明函数的作用域继承“this”，而不是使用全局作用域。例如
（请注意，=>
功能在这里当然是完全不必要的）
您还有一个问题，即您需要将成员
存储在组件状态（this.state.member
），而不仅仅是作为字段，并使用setState
功能对其进行更新。否则，当您更新成员时，您的组件将不会重新呈现。问题是中的this
调用和catch
调用不引用您的类，而是引用默认（全局）范围。你需要把右边的绳子绑起来。实际上，您已经使用此绑定设置了相应的函数，因此您可以直接使用它们：
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>
);
}
}
通常，您还可以使用=>
函数语法，该语法从声明函数的作用域继承“this”，而不是使用全局作用域。例如
（请注意，=>
功能在这里当然是完全不必要的）
您还有一个问题，即您需要将成员
存储在组件状态（this.state.member
），而不仅仅是作为字段，并使用setState
功能对其进行更新。否则，当您更新成员更改时，组件将不会重新渲染：
1。您需要使用then和catch回调方法绑定this
，使用
2。您没有定义初始状态，使用this.state.person.data
将抛出错误
3.将UI存储在状态或全局变量中不是一个好主意，UI部分应仅位于render方法内部
这样写：
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
人：{}
}
//this.successShow=this.successShow.bind（this）；
//this.errorShow=this.errorShow.bind（this）；
}
componentDidMount（）{
axios.get（）https://reqres.in/api/products/3')
。然后（（响应）=>{
此。成功显示（响应）；
})
.catch（（错误）=>{
此.successShow（错误）；
});
}
successShow（响应）{
这是我的国家({
人：回复。数据
});
}
render（）{
返回(
欢迎反应
{JSON.stringify（this.state.person.data）}
{JSON.stringify（this.state.person.data）}
{this.member}
);
}
}
更改：
1。您需要使用then和catch回调方法绑定this
，使用
2。您没有定义初始状态，使用this.state.person.data
将抛出错误
3.将UI存储在状态或全局变量中不是一个好主意，UI部分应仅位于render方法内部
这样写：
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
人：{}
}
//this.successShow=this.successShow.bind（this）；
//this.errorShow=this.errorShow.bind（this）；
}
componentDidMount（）{
axios.get（）https://reqres.in/api/products/3')
。然后（（响应）=>{
这是一场成功的演出