时间戳

首页 > 解决方案 > 为什么异步 act() 调用不需要返回值

reactjs - 为什么异步 act() 调用不需要返回值

问题描述

我不明白await下面的调用实际上是如何做任何事情的，因为它不等待回调中的任何内容。它只是立即返回。没有它是行不通的，所以我知道它是必要的，但它实际上阻止了什么，否则它不会是。即使没有关键字，它通常不会等待（排队事件和剩余状态更新）吗？await回调中没有异步的等待如何产生影响？

当我最初寻找解决方案时，我已经看到了很多使用这种模式的例子。我就是这样到达的。

import React from "react";
import {
  View,
  TextInput,
  Button
} from "react-native";
import { Formik } from "formik";
import partial from "lodash/fp/partial";

const Form = ({ task = {}, onSubmit }) => (
  <Formik initialValues={task} onSubmit={onSubmit}>
    {({ setFieldValue, handleSubmit, values }) => (
      <View>
        <TextInput
          onChangeText={partial(setFieldValue, ["task"])}
          value={values.task}
        />
        <Button onPress={handleSubmit} title="Submit" />
      </View>
    )}
  </Formik>
);

describe("...", () => {
   it("...", async () => {
       const handleSubmit = jest.fn();

       let root;

       act(() => {
           root = create(<Form onSubmit={handleSubmit} />);
       });

       // __HERE__
       await act(async () => {
           // Nothing is being returned here nor is it waiting on anything with an await call
           root.root.findByType(Button).props.onPress();
       });

       expect(handleSubmit).toHaveBeenCalled();
   })
})

标签： reactjsjestjsformik

解决方案

您需要知道的第一件事是“async做什么？”

这是一个例子。

let a = () => 'hey'
let b = async () => 'hey'

// string
console.log(a())

// Promise object
console.log(b())

在添加async一个函数时，它会将函数“包装”在一个 Promise 周围。

所以你可以async在你的所有代码中添加它，它会工作，唯一的区别是它会返回一个 Promise 对象，而不是从函数返回的结果。

你说

没有它是行不通的

但是您没有解释发生错误的原因或错误。请对此更清楚。

但根据我的猜测，act需要收到一个承诺而不是一个正常的功能。也许这就是你需要使用的原因async，没有它就行不通。

推荐阅读