如何创建一个与 typescript 反应的数组？

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 state。 如果取消选中，该 ID 将被删除。

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

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

查看React 文档以获取更多信息。