当依赖性更改时，异步使用效应不会执行整个身体

发布于 2025-02-08 19:03:17 字数 366 浏览 4 评论 0原文

我正在尝试将使用效率与某些异步函数一起使用，但是，当依赖项数组中的依赖性更改时，只有在使用效果中调用非异步代码。

    useEffect( async () => {
        console.log(account);
        const web3 = await getWeb3();
        const acc = await loadAcc(web3);
        await loadContract(web3, acc);
    }, [account])

当我的帐户状态变量更改时，使用效果再次调用，但只有Console.LOG（account）语句才能执行。

我应该如何解决这个问题？

原文

I'm trying to use useEffect with some async functions, however when the dependency in the dependency array changes, only the non async code gets called in useEffect.

    useEffect( async () => {
        console.log(account);
        const web3 = await getWeb3();
        const acc = await loadAcc(web3);
        await loadContract(web3, acc);
    }, [account])

When my account state variable changes, useEffect gets invoked again, but only the console.log(account) statement will get executed.

How should I work around this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

前事休说 2025-02-15 19:03:17

将函数传递到使用效果不能是异步。您可以在使用效率内定义异步函数，然后使用当时的/捕获语法。

此外，还将传递在使用效果之外定义的所有功能（您正在调用）作为使用效率的依赖性

useEffect(() => {

  const myAsyncFunc = async () => {
     console.log(account);
     const web3 = await getWeb3();
     const acc = await loadAcc(web3);
     await loadContract(web3, acc);
  }
  myAsyncFunc.catch(console.error);
       
}, [account, getWeb3, loadAcc, loadContract])

The function passed into useEffect cannot be async. You can define an async function inside the useEffect and then use the then/catch syntax.

Further, also pass in all the functions that are defined outside of the useEffect (that you are calling) as a dependency to useEffect

useEffect(() => {

  const myAsyncFunc = async () => {
     console.log(account);
     const web3 = await getWeb3();
     const acc = await loadAcc(web3);
     await loadContract(web3, acc);
  }
  myAsyncFunc.catch(console.error);
       
}, [account, getWeb3, loadAcc, loadContract])

回复收藏 0 原文

骷髅 2025-02-15 19:03:17

使用效果期望返回void或函数（清理功能）。当您制作功能时，您将使用作为异步，该函数将返回承诺。

一种方法是，

    useEffect( () => {
        const init = async () => {
          const web3 = await getWeb3();
          const acc = await loadAcc(web3);
          const res = await loadContract(web3, acc);
          // do something after the async req
        }
        init();
    }, [getWeb3, loadAcc, loadContract])

否则

const [web3, setWeb3] = useState(null);
const [acc, setAcc] = useState(null);

useEffect(() => {
  getWeb3();
}, [getWeb3])

useEffect(() => {
  if (!web3) return;
  loadAcc(web3);
}, [web3, loadAcc])

useEffect(() => {
  if (acc && web3) {
   loadContract(acc, web3);
  }
}, [acc, web3, loadContract])

const getWeb3 = useCallback(async () => {
   // do some async work
   const web3 = // async call
   setWeb3(web3)
}, [])

const loadAcc = useCallback(async (web3) => {
  // do some async work
  const acc = // async call
  setAcc(acc);
}, [])

const loadContract = useCallback(async (acc, web3) {
  // do anything
}, [])

useEffect expected to return either void or a function( the cleanup function ). When you make the function you pass to useEffect as an async, the function will return a promise.

One way to do it is,

    useEffect( () => {
        const init = async () => {
          const web3 = await getWeb3();
          const acc = await loadAcc(web3);
          const res = await loadContract(web3, acc);
          // do something after the async req
        }
        init();
    }, [getWeb3, loadAcc, loadContract])

Or else,

const [web3, setWeb3] = useState(null);
const [acc, setAcc] = useState(null);

useEffect(() => {
  getWeb3();
}, [getWeb3])

useEffect(() => {
  if (!web3) return;
  loadAcc(web3);
}, [web3, loadAcc])

useEffect(() => {
  if (acc && web3) {
   loadContract(acc, web3);
  }
}, [acc, web3, loadContract])

const getWeb3 = useCallback(async () => {
   // do some async work
   const web3 = // async call
   setWeb3(web3)
}, [])

const loadAcc = useCallback(async (web3) => {
  // do some async work
  const acc = // async call
  setAcc(acc);
}, [])

const loadContract = useCallback(async (acc, web3) {
  // do anything
}, [])

回复收藏 0 原文

~没有更多了~