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

Question

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

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");
      }
    }
  };

用于传递 function 作为 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 （立即调用 Function 表达式，以便立即执行。

(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");
        }
      }
    })();
  };

Answer 2

问题不在您的代码中，而在 ESLint 规则或 ESLint 配置中。 React 17 及更高版本可以将异步函数作为事件处理程序来处理。

IIFE 摆脱了 ESLint 错误，但错误不应该首先出现。 除非你使用的是 React 16 或更早版本。

关于Github的规则进行了长时间的讨论。

建议的解决方案是删除对属性或 arguments 的检查：

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {"checksVoidReturn": {"attributes": false}}
  ]
}

https://typescript-eslint.io/rules/no-misused-promises/