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

如题
image.png

我的页面是根据我点击树状结构不同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 到底怎么请求了才能去做更改

阅读 3.6k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题