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

【问题标题】：How to create an array in react with typescript?如何创建一个与打字稿反应的数组？
【发布时间】：2020-09-28 02:01:12
【问题描述】：

我尝试使用 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 将其持久化。我该怎么做？

【问题讨论】：

useState<number[]>([])

标签： javascript reactjs typescript react-functional-component

【解决方案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 documentation 了解更多信息。

【讨论】：