React 原生变量在运行方法之前未定义

Question

我有一个函数可以调用我的助手.js文件中的方法。

import { getTest } from '../../common/Helper';
...
myMethod() {
...
const test = getTest(this.state.myID);
console.log(test);
}
...

我的助手.js：

export const getTest = (pID) => {
axios.get('http://myserver.com/', {
params: {
method: 'getVacantUnits',
propertyID: pID
}
}).then((response) => {
console.log(response.data);
return response.data;
}).catch((error) => {
// handle error
console.log(error);
return 0;
});
};

这很奇怪，因为我的输出是：

undefined
myDataContent

看起来"const test"在运行 getTest 之前正在接收未定义。为什么会这样？

谢谢

Answer 1

它首先返回这个，因为它没有等待结果：

console.log(test);

我在下面显示的 2 种简单的解决此问题的方法，首先是承诺：

const test = getTest(this.state.myID).then(response=> console.log(response)).catch(err => console.log(err))

也添加返回，因为您需要从最外层函数返回

export const getTest = (pID) => {
return axios.get('http://myserver.com/', {
params: {
method: 'getVacantUnits',
propertyID: pID
}
}).then((response) => {
console.log(response.data);
return response.data;
}).catch((error) => {
// handle error
console.log(error);
return 0;
});
};

第二次使用异步等待：

// add in await
export const getTest = async (pID) => {
return axios.get('http://myserver.com/', {
params: {
method: 'getVacantUnits',
propertyID: pID
}
}).then((response) => {
console.log(response.data);
return response.data;
}).catch((error) => {
// handle error
console.log(error);
return 0;
});
};
// here you are awaiting the response before you run console.log
const test = await getTest(this.state.myID);
console.log(test);

您可以通过其他几种方式解决此问题，但我认为这是最简单的两种。 基本上考虑这样一个事实，即这些是同步运行的，控制台.log在函数返回之前执行，所以如果你"等待"，那么它就会使 console.log(( 依赖于第一个执行的函数。