Async/Await 函数被调用两次

Question

我制作了一个简单的 Async 函数并想在我的 React 应用程序中对其进行测试运行。函数为：

async function WAIT(time: any) {
  await new Promise((r) => setTimeout(r, time))
}

export async function GetMemberList(orgId: string):Promise<ResponseInterface>{
  await WAIT(3000);
  return {code: 404, data: "Data"}
}

我尝试在我的主应用程序中这样调用它：

function App() {
  async function fn() {
    let x = await GetMemberList('SOme');
    console.log(x);
  }
  fn();
  return (<div>.....<div>)
}

但是问题是console.log(x) 运行s 两次。我得到 {code: 404, data: "Data"} 两次。这是为什么？谢谢

Answer 1

我试过运行你的代码，它输出了一次。

问题很可能是在您的模板中触发了重新渲染，并且 fn() 再次被调用。

您可以通过将 fn() 包裹在 useEffect() 中轻松验证它。

Answer 2

解决方法如下：

function App() {
  async function fn() {
    let x = await GetMemberList('SOme');
    console.log(x);
  }

  React.useEffect(() => {
    fn();
  }, []);

  return (<div>.....<div>)
}

使用 useEffect 和一个空的依赖数组将使 fn() 只在 App 组件安装时被调用一次。

Answer 3

通过直接在您的组件中调用 fn() ，它会在您的组件每次渲染时触发。发生这种情况的原因有很多。

你可以通过useEffect来避免这种情况，并指定函数的依赖关系。在这种情况下，它只是函数本身。

function App() {
  async function fn() {
    let x = await GetMemberList('SOme');
    console.log(x);
  }
  
  useEffect(() => {
    fn();
  }, [fn]);
  return (<div>.....<div>)

但是，由于每次组件渲染时都会重新定义 fn，因此每次都会调用它。

在这种特定情况下，您应该在组件外部定义函数。它不依赖于组件提供的任何数据，所以它基本上是一个静态函数。它永远不会改变。在这种情况下，您可以安全地从依赖数组

中删除 fn

async function fn() {
  let x = await GetMemberList('SOme');
  console.log(x);
}

function App() {
  useEffect(() => {
    fn();
  }, []);
  return (<div>.....<div>)

还有其他方法可以做到这一点。可以在useEffect里面定义fn函数，也可以用useCallback来定义，这样render之间会有稳定的引用

function App() {
  useEffect(() => {
    async function fn() {
      let x = await GetMemberList('SOme');
      console.log(x);
    }
    fn();
  }, []);
  return (<div>.....<div>)

使用回调：

function App() {
  const cb = useCallback(async() => {
    let x = await GetMemberList('SOme');
    console.log(x);
  }, []);

  useEffect(() => {
    cb();
  }, [cb]);
  return (<div>.....<div>)

Async/Await 函数被调用两次

Async/Await function gets called twice

async-await

reactjs