用react hooks 遇到个很迷惑的问题, 怎么异步请求数据刷新页面？

Question

如题

我的页面是根据我点击树状结构不同type来获取不同的tabs 渲染函数

其实需求就是在切换到 第二个流水线tabs的那一刻
我会去做一个获取流水线的请求，然后将获取到的数据 设置到 workflows，然后workflows 渲染到界面上

主界面

      <Tabs type="card" onChange={changeTab}>
            {type?.tabsMap.map((item, index) => {
            return <TabPane tab={item.name} key={item.key}>
              {item.key === 'workFlows' && getWorkFlows()}
              </TabPane>
            })}
        </Tabs>

workflow组件

  const getWorkFlows = useCallback(() => {
    if (workFlows && workFlows.length > 0) {
      return <Row gutter={[16, 16]}>
        {workFlows.map((item) => {
          return <p style={{ height: '100px' }}>
            <Pipeline type="mini" info={item}></Pipeline>
          </p>
        })}
      </Row>
    }
    return <Empty />
  }

useEffect 去监听key 改变然后 去设置值

 useEffect(() => {
    if (activeKey === 'workFlows') {
      listWorkFlows({ projectId: activePointInfo.info.id }).then(res => {
        console.log(res.data)
        setWorkFlows(res.data)
      })
    }
  }, [activePointInfo, activeKey])

结果我发现 我切换到流水线目录 依然是没有数据 每次workflows 没有更新到页面上

其实一开始，我是准备把请求直接放到workflows组件里面的 结果render没法渲染异步加载的
所以用useEffect 去监听，记过发现请求了还是不会做更改

各位大佬 是我使用的方式不对吗？
我这边一直用vue 都是请求完了直接改，所以不太明白react 到底怎么请求了才能去做更改

Answer 1

getWorkFlows里有个workFlows，是在useCallback外层的吧。这里会形成闭包导致调用时依然是之前的数据。大多数人对hooks迷惑的点就在于此，这与react的更新机制有关，多去了解react的原理，试着在useCallback第二个参数中传入workFlows依赖项