从 setState 更新数组的正确方法 - Typescript，ReactJS

【问题标题】：Correct way to update array from setState - Typescript , ReactJS从 setState 更新数组的正确方法 - Typescript，ReactJS
【发布时间】：2021-09-30 15:26:51
【问题描述】：

我目前还是 typescript 的新手，我不知道我做的是否正确。我想更新我的数组，并且想将初始状态设置为空数组。目前我正在这样做：

 const [selectValue, setSelectValue] = useState<Array<string>>([]);

我的更新功能是这样的：

const handleChange = (e: any) => {
    setSelectValue((selectValue: any) => [{ ...selectValue, [e.target.value]: e.target.name }]);
  };

输出是这样的：

0: {Ananas : "A"} , Banana : "B"

我做错了什么，因为我希望我的输出等于这样的一个对象：

0: {Ananas : "A" , Banana : "B"}

【问题讨论】：

标签： arrays reactjs typescript

【解决方案1】：

如果您只想在数组中包含一个收集所有键的项目，那么您必须执行以下操作：

const handleChange = (e: any) => {
  setSelectValue((selectValue: any) => {
    const newSelectValue = [...selectValue]
    if (!newSelectValue[0]) newSelectValue[0] = {}

    return newSelectValue.map((value, index) => {
      if (index === 0) {
        return { ...value, [e.target.value]: e.target.name }
      } else {
        return value
      }
    })
  })
};

【讨论】：

顺便说一句，我相信你正在改变这里的状态newSelectValue[0]。 newSelectValue 指的是新数组，newSelectValue[0] 指的是状态值（旧数组），默认情况下应该是不可变的。
@captain-yossarian 是的，你是对的。我更新了答案以消除这种可变性。你现在怎么想？好点了吗？
请删除const newSelectValue = [...selectValue] if (!newSelectValue[0]) newSelectValue[0] = {}
为什么？如果数组是空的并且我们没有以这种方式初始化第一个元素，那么当我们映射数组时它什么也不做。