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

【问题标题】：Update initial useState of object - TypeScript , ReactJS更新对象的初始 useState - TypeScript，ReactJS
【发布时间】：2021-10-02 23:58:21
【问题描述】：

大家好，我目前是 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;
    });
  };

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

【问题讨论】：

stackoverflow.com/a/38213971/6463262
您能分享一下使用handleChange的组件的鳕鱼吗？
我认为您正在尝试将对象定义为状态并更新其属性的值，我说的是真的吗？
是的，这就是整个想法，但是当我正在做一个对象数组更新 <Select name={keys[i]} onChange={(e: any) => handleChange(e)}> 这是我使用 handleChange 的组件
@PandaMastr 我回答了这个问题。请看答案，如果有问题，请说改进。

标签： arrays reactjs typescript

【解决方案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>
  );
}

【讨论】：

单击时您的对象不会更新。它仍然是空的
@PandaMastr 当你改变选择的选项而不是点击选择时它会改变。
@PandaMastr 你试过这种方法吗？
我找到了另一种方法，但是当您单击所选值时仍在您的沙箱中，它根本不会更新对象
是的，现在它正在更新。我将此答案标记为成功以供将来参考

【解决方案2】：

只需从数组中获取第一个值。

let myArr = [{ Ananas: "A", Banana: "B" , Citroen: "C"}] 
let newArr = myArr[0]
console.log(newArr)

// { Ananas: 'A', Banana: 'B', Citroen: 'C' }

【讨论】：

是的，但是handleChange 的想法是只创建对象而不是对象数组。你的方法有点变通

【解决方案3】：

你应该先清理你的类型。很难了解您实际在做什么以及问题出在哪里。 e.target.value 来自哪里？ selectValue 是什么类型？让 TypeScript 帮助你，不要与它抗争:any ;)

如果我做对了，我会以某种方式解决它


type Fruits = Record<'Ananas' | 'Banana' | 'Citroen', string>
export const OkCool = () => {
  const initialData: Fruits[] = [{ Ananas: 'A', Banana: 'B', Citroen: 'C' }]
  const [selectedValue, setSelectedValue] = useState<
    Record<string, Fruits> | undefined
  >()

  const selectFruit = (key: string, fruitsArray: Fruits[]) => {
    // destruct from Fruits[] to get Fruits
    const [fruits] = fruitsArray
    setSelectedValue(value => ({ ...value, [key]: fruits }))
  }

  return (
    <>
      <input
        placeholder="key"
        onChange={e => selectFruit(e.target.value, initialData)}
      />
      {JSON.stringify(selectedValue)}
    </>
  )
}

【讨论】：