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

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 = () => {

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

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

    const id: number = +e.currentTarget.value;

    const { checked } = e.currentTarget;

    if (checked) {

      setSelected(prev => [...prev, id]);

    } else {

      setSelected(prev => prev.filter(item => item !== id));

    }

  };

  return (

    <form>

      {tags &&

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

          <input

            checked={selected.includes(tag.id)}

            type="checkbox"

            value={tag.id}

            onClick={handleTag}

          />

        ))}

    </form>

  );

};

当您选中该复选框时，其ID将添加到选择状态。如果取消选中，该 ID 将被删除。

代码中的问题是你试图析构id，这是一个数字，而实际上你必须析构前一个数组，然后添加id。这可以很容易地传递给将接收先前状态并返回新状态的函数。setSelect

setSelected(prev => [...prev, id]);

有关详细信息，请查看 React 文档。