异步函数以prop的形式传递到React组件中，导致 @typescript-eslint/no-misused-promises错误

Question

我有以下异步 submitnewpatient 函数，它正在抛出@typecript-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");
      }
    }
  };

组件用于将函数作为道具传递：

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

我还尝试了以下操作，以删除基于ESLINT错误消息。但是，似乎我没有输入异步代码块（也许不是触发异步（）函数）：

  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

问题不在您的代码中，而是在ESLINT规则或ESLINT配置中。 React 17及以后可以作为事件处理程序处理异步功能。

IIFE摆脱了ESLINT错误，但错误首先不应出现。除非您使用16或更早的React。

关于 github ）的规则进行了漫长的讨论。

提出的解决方案是要删除属性或参数的检查：

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

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

Answer 2

我认为问题是async代码块语法。 （立即执行的函数表达式。

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

您需要它使其成为 iife

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