我正在开发一个react-native / nodeJS项目,并且使用async / await函数在后端对Axios API的调用遇到了问题。
这是代码:
const TimeTable = () => {
const [attendedCourses, setAttendedCourses] = useState([]);
const [courseSchedules, setCourseSchedules] = useState([]);
useEffect(() => {
getUserCourses();
getCourseSchedule();
console.log(courseSchedules);
}, []);
const getCourseSchedule = async () => {
for (const item of attendedCourses) {
try {
const res = await axios.get(`/api/lesson/findById/${item.courseId}`);
setCourseSchedules((prev) => [
...prev,
{
id: res.data._id,
name: res.data.name,
schedule: [...res.data.schedule],
},
]);
} catch (err) {
const error = err.response.data.msg;
console.log(error);
}
}
};
const getUserCourses = async () => {
const userId = "12345678"; //hardcoded for testing purpose
try {
const res = await axios.get(`/api/users/lessons/${userId}`);
setAttendedCourses(res.data);
} catch (err) {
const error = err.response.data.msg;
console.log(error);
}
};
return (...); //not important
};
export default TimeTable;
方法getUserCourses()
的行为正确,并且始终返回以attendedCourses
状态保存的对象数组。第二种方法getCourseSchedule()
无法正常工作。 useEffect()中的console.log()在大多数情况下会打印一个空数组。
有人可以向我解释原因吗?谢谢!
答案 0 :(得分:1)
虽然该方法是异步的,但实际的useEffect并不是以异步方式处理它,并且直到您到达useEffect中的console.log
时才会等待。如果将console.log放在getCourseSchedule
方法中,并在等待后记录结果,则每次都会显示正确的结果。
您在混淆每种方法的异步特性。您的代码不会在useEffect中等待,而是在实际方法中等待,而其余的useEffect会继续执行。
如果您真的想在useEffect中查看结果,请尝试做:
useEffect(() => {
const apiCalls = async () => {
await getUserCourses();
await getCourseSchedule();
console.log(courseSchedules);
}
apiCalls()
})
答案 1 :(得分:0)
您的useEffect
有一个空数组作为依赖项,这意味着当courseSchedules
具有初始值(空数组)时,它仅在初始渲染之前运行一次
要查看courseSchedules
的变化,您应该添加另一个useEffect
,如下所示:
useEffect(() => {
console.log(courseSchedules);
}, [courseSchedules]);