set_state 嵌套写法有没有问题?

361 天前
 realJamespond

切 tab 时想做一个表单验证,antd 的表单验证是异步的,不想用一个 ref 保留之前的 activeKey ,就想到这种写法,不知是否可行,目前看 OK

        <Tabs type="card" activeKey={activeKey} onChange={(key: string) => {
          set_activeKey(prev=>{ 
            if (prev === '1') {
              form.validateFields().then(()=>{
                console.debug('validateFields ok')
                set_activeKey(key as Key)
              })
              console.debug('return prev')
              return prev
            } else {
              return key as Key
            } 
          })
        }}>
917 次点击
所在节点    React
2 条回复
yandif
361 天前
是可以的,form.validateFields() 是一个异步,不会阻塞 return prev;

所以是先执行了外层的 set_activeKey 。然后等表单校验完成,如果表单验证通过,执行 .then 中的函数。切换 tab 页。

控制台应该先打印 "return prev", 然后验证通过打印 "validateFields ok"

不过我没看懂 ”不想用一个 ref 保留之前的 activeKey “ 是啥意思?

不能直接用 activeKey 吗?

```tsx
<Tabs
type="card"
activeKey={activeKey}
onChange={(key: string) => {
if (activeKey === "1") {
form.validateFields().then(() => {
console.debug("validateFields ok");
set_activeKey(key as Key);
});
} else {
set_activeKey(key as Key);
}
}}
></Tabs>
```
realJamespond
360 天前
感谢回复,===不想用一个 ref 保留之前的 activeKey=== 就是每次更改 activeKey 时就 ref 保存之前的 activeKey ,这样就不用嵌套了,就是写成 if (activeKeyRef.current === "1") {...这样

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/940198

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX