React中如何修改解构对象的属性值？解决setState报错问题

错误原因 #

你定义的person是普通JavaScript对象，不是React的状态变量。setState是React专门为状态变量提供的更新方法，普通对象根本没有这个方法，所以调用时会报错。而且就算你直接修改普通对象的属性，React也不会感知到变化，组件不会重新渲染，UI也不会更新。

修正方案 #

在函数组件里，要用React的useState钩子来定义和管理状态，这是当前React官方推荐的方式。

修正后的完整代码：

import { useState } from 'react'; // React 17+可省略，但建议保留

function YourComponent() {
  // 用useState初始化person状态，初始值是包含weight的对象
  const [person, setPerson] = useState({
    weight: '',
  });

  const { weight } = person; // 解构获取weight值

  const handleChange = (event) => {
    // 调用setPerson更新状态，用展开运算符保留对象其他属性，只修改weight
    setPerson({
      ...person,
      weight: event.target.value,
    });
    // 注意：直接console.log(person)可能看不到最新值，因为setState是异步的
    // 如需查看最新值，可通过useEffect监听person变化实现
  };

  return (
    <input placeholder='weight' onChange={handleChange} value={weight} />
    {/* 加上value属性，让输入框和状态双向绑定，成为受控组件 */}
  );
}

关键说明 #

• useState返回一个数组，第一个元素是当前状态值，第二个是更新状态的方法（这里命名为setPerson）
• 更新对象类型的状态时，必须用展开运算符...person复制原对象的所有属性，再修改目标属性，避免丢失其他数据
• 给输入框添加value={weight}，让它成为受控组件，输入框的值完全由状态控制，这是React的最佳实践

内容的提问来源于stack exchange，提问作者TheTargetAudience