javascript - Vad är det korrekta sättet att initiera tomma states i React med TypeScript

Jag är ganska ny på React och undrade vad som var det korrekta sättet att initialisera tomma state-variabler i React. För närvarande har jag ett formulär i TypeScript som har flera fält att fylla i. De flesta av dessa fält är dropdowns och jag har initialiserat en del statisk data som en array av objekt, något i stil med detta.

export const options = [
    {
        id : 0,
        name : "Setting 1"
    },
    {
        id : 1,
        name : "Setting 2"
    },
    {
        id : 2,
        name : "Setting 3"
    }

];

Så jag kan visa dessa alternativ i rullgardinsmenyn på formuläret och allt fungerar som förväntat. Problemet uppstår när jag försöker initiera det tillstånd som jag använder för att kontrollera uppdateringar på detta fält.

const [myForm, setMyForm] = React.useState({
        dropdown : options[0],
        dropdown1 : options1[0]
    });

Så för mig i myForm-objektet som jag har skapat för att hålla reda på tillståndet, får jag det första alternativet som standard valt precis som jag har angett. Jag kan inte initialisera det till null eftersom TypeScript kräver en typ för varje deklaration. Vad är bästa praxis för att initialt ha värdet som ett tomt objekt och sedan sätta det när användaren väljer alternativet från rullgardinsmenyn? För om jag sätter det till ett tomt objekt som {} i options kan jag inte komma åt id och name-fälten i koden. Kan någon säga vad som är rätt sätt att göra det?

Svar #1

useState kan ta en typ. Detta är bra när Typescript inte kan härleda typen från typen på det initiala värdet. Detta är ofta fallet med vilket null standardvärde som helst. Du behöver berätta för Typescript vad värdet kan vara när det inte är null.

Till exempel:

const [name, setName] = useState<string | null>(null)

// name is of type: string | null
if (name != null) console.log(name.toUpperCase())

Jag följer inte helt din kod här, men jag tror att du kanske vill sätta din stats typ så här, med ett värde som valfritt. Det betyder att det är tillåtet att det saknas eller är odefinierat.

interface State {
  dropdown: FormField
  dropdown1: FormField
}

interface FormField {
  id: number
  name: string
  value?: string
}

Och använd sedan den typen:

const [myForm, setMyForm] = React.useState<State>({
  dropdown : options[0],
  dropdown1 : options1[0]
});

myForm.dropdown.name // allowed, and type is: string | undefined