React复选框窗体状态已延迟

import React, { useState } from 'react';

function CheckboxForm() {
  const [checked, setChecked] = useState(false);

  const handleCheckboxChange = () => {
    setChecked(!checked, () => {
      // 在状态更新后执行相关操作
      console.log('复选框状态已更新：', checked);
    });
  };

  return (
    <div>
      <input type="checkbox" checked={checked} onChange={handleCheckboxChange} />
      <label>复选框</label>
    </div>
  );
}

export default CheckboxForm;

import React, { useState, useEffect } from 'react';

function CheckboxForm() {
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    // 在状态更新后执行相关操作
    console.log('复选框状态已更新：', checked);
  }, [checked]);

  const handleCheckboxChange = () => {
    setChecked(!checked);
  };

  return (
    <div>
      <input type="checkbox" checked={checked} onChange={handleCheckboxChange} />
      <label>复选框</label>
    </div>
  );
}

export default CheckboxForm;