如何在反应钩子中修改我选择的对象？答案

【问题标题】：How can I modify a object of my choice in a react hook?如何在反应钩子中修改我选择的对象？
【发布时间】：2021-06-19 14:35:47
【问题描述】：

当点击按钮时，如何将foo2 更改为e.target.value，而不影响其他对象？

import React from 'react'

export const App = () => {
  const [state, setState] = useState({
    foo1: "12", foo2: 2, foo3: null
  })
  return (
    <div>
      <input type="button" value="" onClick={(e) => setState()}/>
    </div>
  )
}

【问题讨论】：

foo1: "12", foo2: 2, foo3: null 考虑一个数组。如果属性之间没有那么相关，请考虑单独的状态，而不是将它们放在单个大状态对象中以使更新更容易。
我最大的问题是我不知道如何将状态一个一个地传递给另一个组件。 @CertainPerformance
如果你想传递所有的值，拥有一个单一的状态对象可能更合理。 <SomeComp state={state} />

标签： javascript reactjs object react-hooks state

【解决方案1】：

使用spread operator

setState({ ...state, foo2: e.target.value })

【讨论】：

【解决方案2】：

如果“其他对象”是指状态对象中的其他值，那么您可以使用 Javascript 的扩展运算符 setState({ ...state, foo2: 1 }); 执行以下操作作为替代方案，您也可以为各个值使用单独的 useState 钩子，如果它们没有在逻辑上组合在一起。但是，您可能不关心额外的样板文件。

【讨论】：

【解决方案3】：

您可以为按钮添加name 属性，并使用它通过传播原始状态来更新状态，并使用target.value 覆盖属性[target.name]：

const { useState } = React

const App = () => {
  const [state, setState] = useState({
    foo1: "12", foo2: 2, foo3: null
  })
  
  const update = ({ target }) => {
    setState(s => ({ ...s, [target.name]: target.value }))
  }
  
  console.log(state)
  
  return (
    <div>
      <button type="button" name="foo1" value="" onClick={update}>Foo 1</button>
      <button type="button" name="foo2" value="" onClick={update}>Foo 2</button>
      <button type="button" name="foo3" value="" onClick={update}>Foo 3</button>
    </div>
  )
}

ReactDOM.render(
  <App />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：