React中复选框更新对象属性后渲染滞后问题求助

问题根源 #

你的代码存在两个关键问题导致复选框UI无法同步更新：

1. 闭包捕获旧状态：直接依赖obj变量更新状态时，HandleProperty1函数捕获的是组件渲染时的旧obj引用，状态更新后闭包内的obj并未同步，可能导致状态计算偏差。
2. 事件参数传递缺失：onChange回调调用HandleProperty1()时未传递事件对象，依赖旧值取反的方式不如直接获取复选框真实状态可靠。

修复方案 #

推荐使用函数式更新修改状态，React的setState支持传入函数，该函数会接收最新的状态值，确保基于最新数据更新：

修改后的Comp组件代码：

const Comp = ({ obj, setObj }) => {
  const HandleProperty1 = (e) => {
    // 函数式更新，获取最新的state值
    setObj(prevObj => ({ ...prevObj, property1: e.target.checked }));
  };

  return (
    <input
      type="checkbox"
      name="property1"
      checked={obj.property1}
      onChange={HandleProperty1} // 直接传递函数，自动接收事件参数
    />
  );
};

export default Comp;

补充说明 #

• 函数式更新(setObj(prevObj => {...}))能规避闭包带来的旧状态问题，保证每次更新都基于最新的状态计算。
• 直接使用e.target.checked获取复选框的真实状态，比取反旧值更准确，完全匹配用户操作后的实际状态。

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