Question

我知道不建议您为useEffect创建异步添加方法，但是在继续操作之前如何确保功能完全完成

这是我的代码

useEffect(
   () => {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             console.log(2)
         }

         console.log(1);
         RetrieverDataProcess();
         console.log(99);

    }, [])

如果我在控制台中运行

1

99

2

我希望它

1

2

99

Answer 1

您可以尝试一下吗（目前不在PC上）

useEffect(
   () => {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             return console.log(2)
         }

         console.log(1);
         RetrieverDataProcess().then(()=>{
             console.log(99);
         });


    }, [])

Answer 2

您这样做是因为要在准备执行MAINOBJECT时设置console.log(99)状态属性吗？

如果是这样，您可以做的一件事是使用附加的useEffect钩子，该钩子仅在状态属性MAINOBJECT更新时执行：

useEffect(() => {
  if (MAINOBJECT) {
    console.log(99);
  }
}, [MAINOBJECT]);

Answer 3

只需将您的逻辑置于“效果”之外。

您可以在component中定义一个异步函数，然后在EFFECT中调用它。如果您关心性能，请用$sql = "SELECT '',dJawatan ,dIc,dName,dTarikh, dAcara, dBil FROM `event` AS a inner join acara AS b on a.`dAcara` = b.`dAcara` WHERE`RNO` ='$acaraW' ORDER BY dJawatan ASC,dName ,dTarikh DESC";将其包装起来。不要忘记将其设置为依赖项。

更好的做法是将静态逻辑提取到组件外部的小函数中。

Answer 4

您可以使用立即调用的函数表达式或 IFFY 。这也将允许您使用async / await而不是返回到随后链接。

基本上，您是将效果主体包装在一个异步函数中，您可以立即调用该函数。

useEffect(() => {
     (async function anyName() {
         const RetrieverDataProcess = async () => {
             const GetMainListResults = await GetMainList(FORMSTATUS.ID);
             setMAINOBJECT(GetMainListResults); //useState
             console.log(2);
         }

         console.log(1);
         // now you can await the async function to make sure it completes
         await RetrieverDataProcess();
         console.log(99);
     // note the invocation:
     })();
}, [])

如何使useEffect同步

4 个答案: