如何创建一个与打字稿反应的数组？

Question

我尝试使用 ReactJS 和 Typescript 在每次点击时创建一个数组。这是我的代码：

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 将被添加到 select 状态。如果取消选中，id 将被删除。

您的代码中的问题是您试图破坏 id，它是一个数字，而实际上您必须破坏先前的数组，然后添加 id。这可以很容易地传递给 setSelect 一个将接收先前状态和 return 新状态的函数。

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

查看 React documentation 了解更多信息。

如何创建一个与打字稿反应的数组？

How to create an array in react with typescript?

javascript

typescript

reactjs

react-functional-component