reactjs - Asynkron funktion skickad som prop till React-komponent orsakar @typescript-eslint/no-misused-promises-fel

Jag har följande asynkrona submitNewPatient-funktion som ger felmeddelandet @typescript-eslint/no-misused-promises från ESLint. Är det möjligt att justera funktionen så att detta fel tas bort?

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

Komponent som används för att skicka en funktion som en prop:

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

Jag har också försökt följande som tar bort eslint-felmeddelandet. Men det verkar som att jag inte går in i det asynkrona kodblocket (kanske triggar inte async()-funktionen):

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

Svar #1

Problemet ligger inte i din kod utan i ESLint-regeln eller ESLint-konfigurationen. React 17 och senare kan hantera asynkrona funktioner som händelsehanterare.

IIFE tar bort ESLint-felet, men felet borde inte uppstå från början. Om du inte använder React 16 eller tidigare.

Det pågick en lång diskussion om regeln på Github.

Den föreslagna lösningen är att ta bort kontrollen av attribut eller argument:

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

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

Relaterade artiklar