如何在反应中使用类型脚本创建数组？

Question

我试图在每次单击时使用 ReactJS 和类型脚本创建一个数组。这是我的代码：

const FormTags: React.FC = () => {

     const [selected, setSelected] = React.useState<[]>([])

     const handleTag = (e: React.FormEvent<HTMLInputElement>) => {

             let id: number = +e.currentTarget.value

             //working, show me each id

             console.log(id)

             // not working

             setSelected([...id]) // error here

             // Argument of type 'number' is not assignable to parameter of type 

             // 'SetStateAction<[]>'.

     }

     //retrieve tags working well, show me all list tags

     return (

        <form>

            {tags && tags.map(tag: any) => (

                <label key={tag.id}>

                    <input type="checkbox" value={tag.id} onClick={handleTag}/>

                </label>

            )}

       </form>

    )

}

我想构建一个这样的数组 [1， 2， 3， ...]在每次单击中获取标记的 ID 并将其与 .我该怎么做？setSelected

Answer 1

我想这就是你想要的：const FormTags: React.FC = () => {&nbsp; const [selected, setSelected] = React.useState<number[]>([]);&nbsp; const handleTag = (e: React.FormEvent<HTMLInputElement>) => {&nbsp; &nbsp; const id: number = +e.currentTarget.value;&nbsp; &nbsp; const { checked } = e.currentTarget;&nbsp; &nbsp; if (checked) {&nbsp; &nbsp; &nbsp; setSelected(prev => [...prev, id]);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; setSelected(prev => prev.filter(item => item !== id));&nbsp; &nbsp; }&nbsp; };&nbsp; return (&nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; {tags &&&nbsp; &nbsp; &nbsp; &nbsp; tags.map((tag: any) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={selected.includes(tag.id)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={tag.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={handleTag}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </form>&nbsp; );};当您选中该复选框时，其ID将添加到选择状态。如果取消选中，该 ID 将被删除。代码中的问题是你试图析构id，这是一个数字，而实际上你必须析构前一个数组，然后添加id。这可以很容易地传递给将接收先前状态并返回新状态的函数。setSelectsetSelected(prev => [...prev, id]);有关详细信息，请查看 React 文档。