如何在反应钩子中为对象设置属性？答案

【问题标题】：How to set properties to a object within a react hook?如何在反应钩子中为对象设置属性？
【发布时间】：2021-03-21 22:37:22
【问题描述】：

正如标题所说，我怎样才能只更改我想要的对象而不是两者的状态？

  const [state, setState] = useState([
    { foo1: null, foo2: "" },
  ]);

  function setfoo1(e) {
    e.preventDefault();
    // How do i set foo1: "Hello World"
  }

【问题讨论】：

标签： javascript reactjs function object react-hooks

【解决方案1】：

您可以使用扩展运算符复制您希望保持不变的所有字段值，如下所示：

setState({...state, foo1: 'Hello World'});

【讨论】：

【解决方案2】：

传播之前的状态，然后最后分配foo1。例如

setState({
  ...state,
  foo1: "Hello World"
})

【讨论】：

【解决方案3】：

虽然其他答案是有效的方法并且会解决问题，但它们让我想知道一些事情。为什么要使用具有多个属性的状态对象？ useState 将与几个一起使用。组件的变量 foo1 和 foo2 是该组件的状态。为什么要拖出更改此状态的代码？另外，为什么不让 react 为你管理你的状态对象呢？

const [foo1, setFoo1] = useState(null);
const [foo2, setFoo2] = useState("");

// .. later foo1 changes
setFoo1("Hello world");

【讨论】：