arrays - 更新对象的初始 useState - TypeScript，ReactJS

Question

嘿伙计们，我目前是 TypeScript 的新手，我正在尝试拥有一个仅包含对象的状态值。目前我有一个这样的对象数组：

[{ Ananas: "A", Banana: "B" , Citroen: "C"}] 

，但最终目标是拥有这样的东西：

{ Ananas: "A", Banana: "B" , Citroen: "C"}

我是这样定义我的初始状态的

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

现在我尝试这样的事情，但我认为这不是只拥有对象初始状态的正确方法

 const [selectValue, setSelectValue] = useState({});

我的更新功能就是这么简单

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

但正如我从上面所说的，我想更新状态值以仅包含对象而不是对象数组。所以我想知道我该怎么做。预先感谢

标签： arraysreactjstypescript

Answer 1

根据你的解释和我对你问题的理解，你可以做这样的事情。如果有任何问题，请说贡献和改进答案：

import "./styles.css";
import * as React from "react";

export default function App() {
  const [selectValue, setSelectValue] = React.useState({});
  const handleChange = (e: any) => {
    var index = e.nativeEvent.target.selectedIndex;
    console.log(e.nativeEvent.target[index].text);
    setSelectValue({
      ...selectValue,
      [e.target.value]: e.nativeEvent.target[index].text
    });
  };
  React.useEffect(() => {
    console.log(selectValue);
  }, [selectValue]);
  return (
    <div className="App">
      <select onChange={(e) => handleChange(e)}>
        <option value="A">Ananas</option>
        <option value="B">Banana</option>
        <option value="C">Citroen</option>
      </select>
    </div>
  );
}