ReactJS - 如何将 useState 变量设置为函数的 return 值

Question

所以我有一个函数 fillSidebarData()，它为我收集和构建数据，完成后就 returns 它。我想要做的是将变量“sidebarData”设置为该函数的 return 值。作为参考，数据如下所示，如果重要的话：

SidebarData = [
  {
    title: 'Overview',
    path: '/overview',

    subNav: [
      {
        title: 'Users',
        path: '/users',
      },
      {
        title: 'Revenue',
        path: '/revenue',
      }
    ]
  }

这是创建数据的函数的代码。

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

  function fillSidebarData () {

    let sidebarData = []

    UserService.getPosts(0).then((response) => {

        response.data.map((value, key) => {
          UserService.getPosts(value.PostID).then((response) => {

            let subNav = []

            response.data.map((value, key) => {
              subNav.push({
                title : value.postName,
                path: `/${value.PostID}`
              })
            })

            let sidebarItem = {
              title: value.postName,
              path: `/${value.PostID}`,
              subNav : subNav
            }

            sidebarData.push(sidebarItem)
          })
        })
        //The console log shows the data in the exact format I want it, so nothing weird here
        console.log(sidebarData)
        return sidebarData
    }, error => {
        console.log(error)
    })   
}

  useEffect(() => {
      //Here is where I want to set the sidebar data to the return value of fillSideBarData method but sidebarData is undefined when using it elsewhere in the code.
      setSidebarData(fillSidebarData())
    return () => {
      setSidebarData([])
    }
  }, [sidebarData])

Answer 1

由于您的问题缺乏上下文，我将根据您正在尝试从后端获取导航数据并根据您获取的数据呈现导航组件的假设来回答您的问题。

我在这里注意到 useEffect 钩子没有在函数组件中使用。 According to React documentation，你使用Effect Hook在函数组件中执行副作用。

要回答您原来的问题，您的 setSidebarData 需要在 fillSidebarData 函数中调用。

const Nav = () => {
  const [sidebarData, setSidebarData] = useState([])

  const fillSidebarData = () => {
    let sidebarData = []

    UserService.getPosts(0).then((response) => {

      response.data.map((value, key) => {
        UserService.getPosts(value.PostID).then((response) => {

          let subNav = []

          response.data.map((value, key) => {
            subNav.push({
              title : value.postName,
              path: `/${value.PostID}`
            })
          })

          let sidebarItem = {
            title: value.postName,
            path: `/${value.PostID}`,
            subNav: subNav
          }

          sidebarData.push(sidebarItem)
        })
      })
      // Your setSidebarData needs to be called here
      setSidebarData(sidebarData)
    })
    .catch(error => {
      console.log(error)
    })   
  }
  
  useEffect(() => {
      // If you are updating your menu data just once, 
      // you probably do not need to resubscribe to your sidebarData state.
      fillSidebarData()
  })

  return (
    ...
  )
}