Question

我是 React 的新手，想要一些关于如何使用 useEffect() 的帮助。我有一个用 Reducer 实现的状态机，想使用 useEffect() 来更新状态。

我有如下状态机。默认情况下，状态设置为 init，在调用 sendEvent("INITIALIZE") 后，状态更新为 idle。我想在 useEffect() 里面做这个过程。

但是我有一个函数要在调用 sendEvent("INITIALIZE") 之前执行，所以我想要的顺序看起来像这样

如果当前状态为“init”，则调用handleInitialize()并等待直到它被执行
handleInitialize() 被执行并返回一个标志
检查标志和 sendEvent("INITIALIZE")

到目前为止，我有以下代码，似乎 useEffect() 不能是异步函数

useEffect(() => {
    console.log("useEffect() -a");

    if (currentState === "init"){      
      let flag =  handleInitialize();
      console.log("flag" + flag);
      if (flag){
        setInitialized(true);
        console.log("initialize event INITIALIZE");
        sendEvent("INITIALIZE")
      }
    }

    console.log("useEffect() -x");
  }, [currentState, sendEvent]);

我看过React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing。

即使我用异步包装这个函数，我仍然看到问题。我用下面的代码进行了测试

 useEffect(() => {
    console.log(AppName+":" +"useEffect() -a");

    async function update(){
      console.log(AppName+":" +"update() -a");

      try {
      if (currentState === "init"){      
        let flag =  await handleInitialize();
        console.log(AppName+":" +"flag" + flag);
        if (flag){
          setInitialized(true);
          console.log(AppName+":" +"initialized event INITIALIZE");
          sendEvent("INITIALIZE")
        }
      }
    } catch (error) {}
    console.log(AppName+":" +"update() -x");
  }

  update();

  console.log(AppName+":" +"useEffect() -x");
  }, [currentState, sendEvent]);

打印出来的是：

ExampleApp:EaxampleApp2: -a
ExampleApp.tsx:128 ExampleApp:switch statement:init
ExampleApp.tsx:94 ExampleApp:useEffect() -a
ExampleApp.tsx:97 ExampleApp:update() -a
ExampleApp.tsx:125 ExampleApp:useEffect() -x
ExampleApp.tsx:102 ExampleApp:flagtrue
ExampleApp.tsx:59 ExampleApp:EaxampleApp2: -a
ExampleApp.tsx:128 ExampleApp:switch statement:init
ExampleApp.tsx:105 ExampleApp:initialized event INITIALIZE
ExampleApp.tsx:59 ExampleApp:EaxampleApp2: -a
ExampleApp.tsx:128 ExampleApp:switch statement:idle
ExampleApp.tsx:120 ExampleApp:update() -x
ExampleApp.tsx:94

我希望看到这个顺序，但上面的输出在 useEffect() -x

之后打印了 update() -x

ExampleApp:useEffect() -a
ExampleApp.tsx:97 ExampleApp:update() -a
ExampleApp.tsx:120 ExampleApp:update() -x
ExampleApp.tsx:125 ExampleApp:useEffect() -x

如果有办法做到这一点，请告诉我。

谢谢，

React/JS 使用 useEffect 改变状态

0 个答案: