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

Posted 2023-02-22

【中文标题】如何在反应钩子中修改我选择的对象？

【英文标题】：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 />

【参考方案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>