ReactJS 如何将useState变量设置为自定义函数的返回值

核心问题根源 #

• 异步逻辑同步取值错误：fillSidebarData 内部的 UserService.getPosts 是异步请求，函数执行时不会等待请求完成就结束，因此你同步调用拿到的返回值天然是 undefined，then 内部的返回值不会作为外层函数的返回值。
• useEffect依赖错误：你把sidebarData加进了useEffect依赖数组，每次调用setSidebarData都会触发useEffect重新执行，会造成无限请求循环。
• 多并行异步请求未做等待处理：你遍历发起了多个子请求，没有等待所有请求完成就操作数据，很容易出现赋值时数据不完整的问题。

修复后的代码 #

const [sidebarData, setSidebarData] = useState([])

async function fillSidebarData () {
  try {
    // 先请求第一层数据
    const firstLevelRes = await UserService.getPosts(0)
    // 并行请求所有第二层数据，用Promise.all等待全部完成
    const sidebarResult = await Promise.all(firstLevelRes.data.map(async (firstItem) => {
      const secondLevelRes = await UserService.getPosts(firstItem.PostID)
      // 组装subNav
      const subNav = secondLevelRes.data.map(secondItem => ({
        title: secondItem.postName,
        path: `/${secondItem.PostID}`
      }))
      // 组装单个侧边栏项
      return {
        title: firstItem.postName,
        path: `/${firstItem.PostID}`,
        subNav: subNav
      }
    }))
    console.log(sidebarResult) // 格式和你之前打印的完全一致
    return sidebarResult
  } catch (error) {
    console.log(error)
    return []
  }
}

useEffect(() => {
  // 调用异步函数，拿到结果后再赋值
  fillSidebarData().then(data => {
    setSidebarData(data)
  })
  return () => {
    setSidebarData([])
  }
// 依赖数组留空，只在组件首次挂载时执行一次
}, [])

额外说明 #

• 如果你用的是React 18 严格模式，开发环境下useEffect会执行两次，属于正常现象，生产环境不会出现。
• 后续使用sidebarData时建议先判断长度，比如sidebarData.length > 0再渲染对应内容，避免请求完成前的空数组报错。

内容的提问来源于stack exchange，提问作者Kevin. J