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

Question

我目前在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"}

Answer 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
      }
    })
  })
};