异步函数作为 prop 传递给 React 组件导致 @typescript-eslint/no-misused-promises 错误

Question

我有以下异步 submitNewPatient 函数，它从 elint 中抛出 @typescript-eslint/no-misused-promises 错误消息。是否可以调整函数以消除此错误？

const submitNewPatient = async (values: PatientFormValues) => {
    try {
      const { data: newPatient } = await axios.post<Patient>(
        `${apiBaseUrl}/patients`,
        values
      );
      dispatch({ type: "ADD_PATIENT", payload: newPatient });
      closeModal();
    } catch (e: unknown) {
      if (axios.isAxiosError(e)) {
        console.error(e?.response?.data || "Unrecognized axios error");
        setError(
          String(e?.response?.data?.error) || "Unrecognized axios error"
        );
      } else {
        console.error("Unknown error", e);
        setError("Unknown error");
      }
    }
  };

用于将函数作为 prop 传递的组件：

<AddPatientModal
        modalOpen={modalOpen}
        onSubmit={submitNewPatient}
        error={error}
        onClose={closeModal}
      />

我还尝试了以下删除基于 eslint 错误消息的方法。但是，似乎我没有进入异步代码块（可能没有触发 async() 函数）：

  const submitNewPatient = (values: PatientFormValues) => {
    async () => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    };
  };

Answer 1

我认为问题出在 async 代码块语法上。您需要它来使它成为 IIFE (Immediately-invoked 函数表达式，以便立即执行。

(async () => {
    await someAsyncFunction();
})();

你的 submitNewPatient 变成 -

const submitNewPatient = (values: PatientFormValues) => {
    (async () => {
      try {
        const { data: newPatient } = await axios.post<Patient>(
          `${apiBaseUrl}/patients`,
          values
        );
        dispatch({ type: "ADD_PATIENT", payload: newPatient });
        closeModal();
      } catch (e: unknown) {
        if (axios.isAxiosError(e)) {
          console.error(e?.response?.data || "Unrecognized axios error");
          setError(
            String(e?.response?.data?.error) || "Unrecognized axios error"
          );
        } else {
          console.error("Unknown error", e);
          setError("Unknown error");
        }
      }
    })();
  };

异步函数作为 prop 传递给 React 组件导致 @typescript-eslint/no-misused-promises 错误

Async function passed as prop into React component causing @typescript-eslint/no-misused-promises error

reactjs

typescript

axios

react-functional-component

asynchronous-javascript