正在返回 Axios 数据,但调用代码不起作用
Axios data being returned, but calling code not working
提前感谢阅读。我对 React 和 es6 世界真的很陌生。我有一个使用 axios 调用 api 的工作组件。都好。重新设计它以将冗余 api 调用代码放入实用程序中,并从需要数据的任何地方调用它。但我无法弄清楚为什么这个函数调用不起作用。有人看到我错过了什么吗?
这是效用函数:
import Axios from 'axios';
export function getData(strPath){
var sendToken = {
headers: {'Authorization': 'Token tokenHere'}
};
var sendPath = "http://pathHere.com/api/" + strPath
Axios
.get(sendPath,sendToken)
.catch(function (error) {
//error handling here
})
.then(function (response) {
console.log(response.data.results) //outputs my array of 2 elements
return(response.data.results);
})
};
这里是调用的react组件:
import React, { Component } from 'react';
import { getData } from './Utils';
class BoardContainer extends React.Component {
constructor(props){
super(props);
this.state = { positions: [] };
}
componentWillMount(){
var x = getData('positions'); //simplified code for debugging and example
console.log(x); //ISSUE: x is undefined
}
render() {
return(
<div>Testing Rendering Board Container
//rendering code would be here (child component call)
</div>
)
}
}
效用:
import Axios from 'axios'
export function getData(strPath){
const sendToken = {
headers: {'Authorization': 'Token tokenHere'}
}
const sendPath = "http://pathHere.com/api/" + strPath
return Axios.get(sendPath, sendToken)
};
组件:
import React, { Component } from 'react'
import { getData } from './Utils'
class BoardContainer extends React.Component {
constructor(props){
super(props);
this.state = { positions: [] }
}
componentWillMount(){
getData('positions').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
render() {
return(
<div>Testing Rendering Board Container
//rendering code would be here (child component call)
</div>
)
}
}
提前感谢阅读。我对 React 和 es6 世界真的很陌生。我有一个使用 axios 调用 api 的工作组件。都好。重新设计它以将冗余 api 调用代码放入实用程序中,并从需要数据的任何地方调用它。但我无法弄清楚为什么这个函数调用不起作用。有人看到我错过了什么吗?
这是效用函数:
import Axios from 'axios';
export function getData(strPath){
var sendToken = {
headers: {'Authorization': 'Token tokenHere'}
};
var sendPath = "http://pathHere.com/api/" + strPath
Axios
.get(sendPath,sendToken)
.catch(function (error) {
//error handling here
})
.then(function (response) {
console.log(response.data.results) //outputs my array of 2 elements
return(response.data.results);
})
};
这里是调用的react组件:
import React, { Component } from 'react';
import { getData } from './Utils';
class BoardContainer extends React.Component {
constructor(props){
super(props);
this.state = { positions: [] };
}
componentWillMount(){
var x = getData('positions'); //simplified code for debugging and example
console.log(x); //ISSUE: x is undefined
}
render() {
return(
<div>Testing Rendering Board Container
//rendering code would be here (child component call)
</div>
)
}
}
效用:
import Axios from 'axios'
export function getData(strPath){
const sendToken = {
headers: {'Authorization': 'Token tokenHere'}
}
const sendPath = "http://pathHere.com/api/" + strPath
return Axios.get(sendPath, sendToken)
};
组件:
import React, { Component } from 'react'
import { getData } from './Utils'
class BoardContainer extends React.Component {
constructor(props){
super(props);
this.state = { positions: [] }
}
componentWillMount(){
getData('positions').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
render() {
return(
<div>Testing Rendering Board Container
//rendering code would be here (child component call)
</div>
)
}
}