React Hooks 使用问题，顺序问题。Vue转React后百思不得其解?

  • Z时代
  • 2024-02-16
  • 分类：IT

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 的话：

  1. 程序难看，没有一个简单清晰的执行逻辑顺序
  2. 没有绝对的依赖关系，如果在某个地方也会改动 date ，但不涉及数据更新

又或者不用 useEffect 用参数传递的话，又感觉麻烦。明明都 useDate 了却还是要通过普通的参数传值，没有 Vue 的 $nextTick 一半方便...。
不过我觉得 React 怎么火热，肯定有对应的解决方法的，或者是我没有系统的学习过，哪里的思维不对，请求大佬指点。
(有看过网上分享的，可以实现 useState 也传递回调函数的。但不太官方，不知道是否合适。)

回答：

解决了异步问题，不在同一个方法内设置 state 和使用 state 了。
在 Form 的 onValuesChange 时更新了 date 值

回答：

如果只是单纯保存值的话 直接使用useRef吧

回答：

在 React 里，useState 的状态更新是异步的，而且不会立马更新状态。用useEffect的副作用试试：

useEffect(() => {
    if (date) {
        getWorkSheet();
    }
}, [date]);
useEffect(() => {
    if (workSheet) {
        getPackInBound();
    }
}, [workSheet]);

或者：

async function onSearch() {
    const { date } = editForm.current.validateFields();
    setDate(date);
    const workSheetData = await getWorkSheet(date);
    setWorkSheet(workSheetData);
    await getPackInBound(workSheetData);
}

实在觉得不好理解的话，你也可以自定义hook,或者在用第三方状态管理库（Redux 或 MobX）

以上是 React Hooks 使用问题，顺序问题。Vue转React后百思不得其解? 的全部内容， 来源链接： utcz.com/p/934870.html

回到顶部