Question

我有一个名为async a()的异步函数，该函数必须在函数componentDidMount()之前运行。

那么如何在构造函数中调用异步函数？因为构造函数先于componentDidMount函数运行。

我需要确保我的async a()首先在构造函数中完成，然后执行componentDidMount中的所有方法。

Answer 1

异步构造函数是一种潜在的反模式，因为它不会导致预期的行为。

应该在组件安装之后发生异步副作用，并因此在componentDidMount中发生，这就是它的用途。延迟组件的生命周期是不可能的，并且用这些术语来思考它是不正确的。

它应该像这样工作：

class Foo extends Component
  async a() {...}

  async componentDidMount() {
    await this.a();
  }

  render() {
    (conditionThatIsTrueWhenThereResult) ? (
      <div>...the result from a...</div>
    ) : (
      <div>fallback</div>
    );
  }
}

如果有必要使组件保持同步，则应将a异步副作用移到仅当准备好使用a的结果时才呈现子代的父组件。

Answer 2

您不能在构造函数中执行此操作，因为构造函数不能使用await
因此，您可以为要在b()之后运行的所有进程提供另一个功能（例如async a()）。您有两种选择：

1-使用async/await：

async componentDidMount() {  
    await a();  // it will wait here untill function a finishes

    b(); // after function a finished, this function will calls
}

2-使用.then：

componentDidMount() {
    // in below line, function `a` will call, and when it finishes, the function inside `.then` will be notified
    a().then(() => {
        b(); // now your function `a` finished completely and you can call extra process in function `b`
    });
}

Answer 3

像这样在componentDidMount中调用a()：

async componentDidMount() {
       await a();
       otherFuncions()
}

otherFunctions()将仅在a()完成后执行

Answer 4

构造函数中的异步工作是不可以。

通常，您将拥有一个呈现微调器并触发异步调用的组件。然后，您可以更新该组件以在异步调用完成后呈现其他内容。

另一种解决方案是将这种逻辑推向呈现此组件的任何人。父级应仅在异步调用之后触发异步调用并呈现组件。

正如其他人所建议的，您可以在组件生命周期中使用componentDidMount来解决这个问题。
参见：https://reactjs.org/docs/state-and-lifecycle.html

Answer 5

使用UNSAFE_componentWillMount()或componentWillMount()或更好地阅读本https://reactjs.org/docs/react-component.html#unsafe_componentwillmount 或请搜索什么是构造函数。

Answer 6

大家好，我已经测试了您回答的所有代码，但结果仍然如下所示

async function a() {
    setTimeout(() => {
        console.log('A');
    }, 2000);
}

async function b() {
    setTimeout(() => {
        console.log('B')
    }, 1000);
}

function c() {
    console.log("C");
}


async function componentDidMount() {
    await a();
    await b();
    c();
}

componentDidMount();

输出： C 乙一个

正如您在此处所说，A和B应该首先完成，然后是最后一个非异步功能。一个

是否可以在react-native的构造函数中调用异步函数？

6 个答案: