React中如何存储PromiseResult返回的数据？

架构老林

2026-8-18

解决Promise结果存储与异步执行顺序问题

问题根源

异步执行顺序问题：JavaScript是单线程的，同步代码优先执行。你标注2的console.log(questionList)是同步代码，会在getAllQuestion内部的await readAllQuestion()完成前就执行，此时questionList还是初始的空数组。而标注1的console.log是在异步操作完成后执行的，所以能拿到正确数据。
const变量不可重新赋值：你用const声明了questionList，后续直接赋值questionList = await readAllQuestion()会抛出语法错误，这是隐性的代码问题。

解决方案

方案1：修正变量声明+确保异步完成后访问数据

把const改为let，然后在异步操作完成后再访问数据：

let questionList = []
const getAllQuestion = async () => {
   questionList = await readAllQuestion()
   console.log(questionList)   // 正确输出数据
}

// 方式1：用.then()等待异步完成
getAllQuestion().then(() => {
   console.log(questionList)   // 此时能拿到数据
})

// 方式2：用async/await包裹初始化逻辑
async function initApp() {
   await getAllQuestion()
   console.log(questionList)   // 此时能拿到数据
}
initApp()

方案2：避免全局变量，通过函数返回值获取数据

更推荐这种方式，减少全局变量带来的副作用：

const getAllQuestion = async () => {
   const questionList = await readAllQuestion()
   console.log(questionList)   // 正确输出数据
   return questionList
}

// 使用时直接获取返回值
getAllQuestion().then(list => {
   // 在这里处理获取到的问题列表
   console.log(list)
})

// 或者在async函数中使用
async function processQuestions() {
   const questionList = await getAllQuestion()
   // 执行你的业务逻辑，比如渲染列表、过滤数据等
}
processQuestions()