如何更改状态挂钩中的多个键值？

Posted 2023-02-22

【中文标题】如何更改状态挂钩中的多个键值？

【英文标题】：How to change multiple key values in a state hook?

【发布时间】：2021-09-03 15:43:40

【问题描述】：

我有一个用户对象const [user, setUser] = useState(name: "James", age: 33)，如何将名称设置为Joe，将年龄设置为25？

【问题讨论】：

你想在点击事件后做这个还是别的什么？

是的，我想要。 @decpk

【参考方案1】：

您可以使用setUser 执行此操作，并将更新后的状态传递为。但它每次都会替换为Joe和25

Codesandbox

setUser(
      name: "Joe",
      age: 25
);

如果您想从用户那里获取数据，然后更改姓名和年龄

codesandbox

const [user, setUser] = useState( name: "James", age: 33 );
  const [newUserName, setNewUserName] = useState("");
  const [newUserAge, setNewUserAge] = useState(user.age);

  const changeName = () => 
    setUser(
      name: "Joe",
      age: 25
    );
  ;

  function changeUserName(e) 
    setNewUserName(e.target.value);
  

  function changeUserAge(e) 
    setNewUserAge(e.target.value);
  

  return (
    <>
      <div>user.name</div>

      <div>user.age</div>

      <input
        type="text"
        value=newUserName
        onChange=changeUserName
        placeholder="new user name"
      />
      <input
        type="number"
        value=newUserAge
        onChange=changeUserAge
        placeholder="new user age"
      />
      <button onClick=changeName> change </button>
    </>
  );