React Hooks 使用问题,顺序问题。Vue转React后百思不得其解?
react 使用 hook如果我想实现一个线性操作如:
const [date,setDate] = useState();
const [workSheet,setWorkSheet] = useState();
// 伪代码
function onSearch(){
const {date} = editForm.current.validateFields();
setDate(date);
// 函数内部依赖 date
await getWorkSheet();
// 函数内部依赖 workSheet
await getPackInBound();
}
如何才能保证程序按照线性的逻辑执行下去,因为 setState 是异步的所以很多文档都推荐用说 useEffect 来解决这个问题,可是如果全部用 useEffect 的话:
- 程序难看,没有一个简单清晰的执行逻辑顺序
- 没有绝对的依赖关系,如果在某个地方也会改动 date ,但不涉及数据更新
又或者不用 useEffect 用参数传递的话,又感觉麻烦。明明都 useDate 了却还是要通过普通的参数传值,没有 Vue 的 $nextTick 一半方便...。不过我觉得 React 怎么火热,肯定有对应的解决方法的,或者是我没有系统的学习过,哪里的思维不对,请求大佬指点。(有看过网上分享的,可以实现 useState 也传递回调函数的。但不太官方,不知道是否合适。)
回复
1个回答
test
2024-06-27
解决了异步问题,不在同一个方法内设置 state 和使用 state 了。在 Form 的 onValuesChange 时更新了 date 值
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容