使用react基于后端响应更新复选框值

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

const CheckboxExample = () => {
  const [checkboxValue, setCheckboxValue] = useState(false);

  useEffect(() => {
    // 发起后端请求，获取复选框的初始值
    fetch('/api/checkboxValue')
      .then(response => response.json())
      .then(data => setCheckboxValue(data.value))
      .catch(error => console.error(error));
  }, []);

  const handleCheckboxChange = () => {
    const newValue = !checkboxValue;
    setCheckboxValue(newValue);

    // 发送更新后的值到后端
    fetch('/api/updateCheckboxValue', {
      method: 'POST',
      body: JSON.stringify({ value: newValue }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={checkboxValue}
          onChange={handleCheckboxChange}
        />
        Checkbox
      </label>
    </div>
  );
};

export default CheckboxExample;