Weboldal keresés

reactjs - Hogyan használjuk a useState-et Typescripttel üres tömb átadásakor

Megpróbálom a JSX kódomat TypeScript-re (TSX) konvertálni, és nehézségeim vannak az interfész átadásával a useState hook használatakor. Csak egy üres tömb interfészt szeretnék a state-emben, és frissítéskor szeretném az objektumot egyesével hozzáadni a tömbhöz.

Frissítés közben Typed hibát kapok a számlálóval: "Az 'any[]' típusú argumentum nem rendelhető a 'SetStateAction' típusú paraméterhez. Az 'any[]' típus nem rendelhető a '(prevState: IData) => IData' típushoz. Az 'any[]' típus nem illeszkedik a '(prevState: IData): IData' aláíráshoz."

Itt van a kód, amit elkészítettem:

sample.tsx

const interface IData {
id: number
value: string
}
const Sample = () => {

let [count, setCount] = useState<IData>([]);       <------------ Want to know how to pass the blank interface or Array and also how to update interface once values are pushed to the Array

const addCount = () => {
    setCount([...count, {
        id: count.length,
        value: 'Condition ' + count.length      
    }])
}

const handleRemove = (id:number) => {
    console.log(id);
    const count_upd = count.filter((item:any) =>  item.id != id);
    setCount(count_upd);
}


return(
    <React.Fragment>
        <Container>
        { Array(count).fill(<ConditionSeg Data={count.map((item:IData) =>  (
                    item.id,item.value
                ))}
                HandleRemove ={handleRemove}
                />)}
        </Container>
        <Container>
            <Button 
                onClick={addCount}>
                Click me</Button>
        </Container>
    </React.Fragment>
)

}

Ui.: Ne törődj a gépelési hibákkal.

Válasz #1

Amennyire én látom, egy IData típusú értékekből álló tömböt szeretnél tárolni. Ebben az esetben a következőt kellene használnod

let [count, setCount] = useState<IData[]>([]);

Ez azt jelenti, hogy egy IData típusú értékeket tartalmazó tömböt tárolsz. A fenti példádban elfelejtetted a tömb zárójeleit, így a setCount valójában egyetlen IData típusú objektumot várna tömb helyett.

Kapcsolódó cikkek