Hur man använder setState med en Array och ett objekt i Typescript?

Så här deklarerar jag ett tillstånd

const [input, setInput] = React.useState('')
const [goals, setGoals] = React.useState<string[]>([])

och detta är min felkod:

const addHandler = () => {
    setGoals((curGoals) => [...curGoals, { key: Math.random().toString(), value:input}])
}

Det här är en typescript-ledtråd:

Argument av typen '(curGoals: string[]) => (string | { key: string; value: string; })[]' kan inte tilldelas parametern av typen 'SetStateAction'. Typen '(curGoals: string[]) => (string | { key: string; value: string; })[]' kan inte tilldelas typen '(prevState: string[]) => string[]'. Typen '(string | { key: string; value: string; })[]' kan inte tilldelas typen 'string[]'. Typen 'string | { key: string; value: string; }' kan inte tilldelas typen 'string'. Typen '{ key: string; value: string; }' kan inte tilldelas typen 'string'.ts(2345)

Jag förstår fortfarande inte varför min kod fortfarande ger detta fel. Jag använde en array av typen string med useState.

Hur kan jag åtgärda detta fel?

Svar #1

Du deklarerar tillståndet som string[], vilket betyder att det är en array av strängar. Så ett objekt i detta tillstånd måste vara en string. { key: Math.random().toString(), value: input } är ett objekt med egenskaperna value och key, där egenskapen är av typen string.

Du kan ändra tillståndet till att vara av typen Array<{key: string, value: string}>

const [input, setInput] = React.useState('')
const [goals, setGoals] = React.useState<
    Array<{
        key: string,
        value: string
    }>
>([])

const addHandler = () => {
    setGoals((curGoals) => [...curGoals, { key: Math.random().toString(), value: input }])
}

Lekplatslänk