javascript - Vad är typen på useState setter-funktionen?

Ibland måste setter-funktionen för en useState-hook skickas runt. Vad är rätt sätt att typa den funktionen?

// some component with useState
const [infoText, setInfoText] = useState<string>(""); 

// same component calls a function in which the setter function is needed.
getInfoText(setInfoText);

// in the definition of that function (getInfoText) I now want to correctly type the setter function
export function getInfoText(setInfoText: ???) {

P.S.: Jag vet att det finns ett par liknande frågor. Jag vill ställa en allmän fråga utan sammanhang, såsom: vad är den korrekta typen för denna bit kod.

Svar #1

Typen av statssättaren i React är Dispatch<SetStateAction<TypeOfTheState>> där Dispatch och SetStateAction kan importeras från "react". Som ett exempel:

import { Dispatch, SetStateAction, useState } from "react";

export default function Component() {
  // The type of setInfoText is Dispatch<SetStateAction<string>>
  const [infoText, setInfoText] = useState<string>("");

  // We can give it as an argument to foo, as it's typed below
  foo(setInfoText);

  return <></>;
}

function foo(stateSetter: Dispatch<SetStateAction<string>>) {}

Relaterade artiklar