如何使用useState同时更新对象中的多个字段？

API 探路者

2026-8-9

解决思路

1. 先排查基础值的有效性

先确认auth.decodedUser.userId是否能拿到有效值：在handleChange里加console.log(auth.decodedUser.userId)，如果输出undefined或null，状态更新自然不符合预期。
检查初始state的结构：useState(book)里的book是否包含available字段且初始值为true？如果book本身没有available，或者初始就是false，更新后也看不到变化。

2. 简化状态更新逻辑（放弃依赖按钮name）

你的需求是固定更新两个字段，完全不需要借助按钮的name属性，直接写死字段更可靠，修改后的代码如下：

const [state, setState] = useState(book);

const handleBorrow = () => {
  const userId = auth.decodedUser.userId;
  // 先校验必要条件
  if (!state || !userId) return;
  
  setState({
    ...state,
    available: false,
    borrowerId: userId
  });
};

// 按钮去掉name属性，绑定新的点击事件
<Button
  type="submit"
  variant="outlined"
  color="inherit"
  onClick={handleBorrow}
>
  borrow
</Button>

3. 处理异步状态更新的潜在问题

如果状态更新后界面没及时刷新，可能是React状态更新的异步特性导致的，改用函数式更新确保拿到最新状态：

setState(prevState => {
  if (!prevState) return prevState;
  return {
    ...prevState,
    available: false,
    borrowerId: userId
  };
});

4. 排除表单默认行为干扰

按钮的type="submit"可能触发表单默认提交，导致页面刷新、状态重置，需要在事件里阻止默认行为：

const handleBorrow = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
  const userId = auth.decodedUser.userId;
  if (!state || !userId) return;
  
  setState({
    ...state,
    available: false,
    borrowerId: userId
  });
};