用于将异步回调作为 React 道具传递和调用的语法

Question

我想知道传递的正确语法是什么，然后通过 React 组件调用异步调用。具体说来：

通常，我会有一个这样的函数：

const doAsync = async (obj) => {
await doSomethingAsync(obj)
}

。然后我会把它传递给一个组件，如下所示：

<>
<MyComponent asyncCallback={doAsync} />
</>

我对这里的几件事有点困惑：

1. 我应该将函数向下传递吗asyncCallback={doAsync(obj)}或asyncCallback={async () => await doAsync(obj)}或只是asyncCallback={doAsync}？
2. 当调用这个函数时，比如说<button>，它应该像这样onClick={async (obj) => doAsync(obj)}还是onClick={doAsync}这样做？

感谢您的帮助！

Answer 1

像这样传递函数asyncCallback={doAsync}是最好的方法。您只需将此函数作为任何其他变量传递即可。

像这样的传递函数也应该asyncCallback={async () => await doAsync(obj)}工作，但它只是很多样板，你没有必要每次重新渲染两个新函数。

像这样传递它不起作用asyncCallback={doAsync(obj)}因为你不传递这个函数，你在这个地方调用它。

阿拉伯数字。 你可以这样做onClick={doAsync}但你会event变量作为参数传递，而不是你的自定义obj(如果可以的话，你可以这样做)。

如果你想传递自定义obj变量，你可以像这样onClick={() => doAsync(obj)}传递它(你不需要使用async或await关键字)。