解决React报错You provided a `checked` prop to a form field

// App.js
export default function App() {
  // ⛔️ Warning: You provided a `checked` prop to a form field
  // without an `onChange` handler. This will render a read-only field.
  // If the field should be mutable use `defaultChecked`.
  // Otherwise, set either `onChange` or `readOnly`.
  return (
    <div>
      <input type="checkbox" id="subscribe" name="subscribe" checked={true} />
    </div>
  );
}

export default function App() {
  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />
    </div>
  );
}

// App.js
import {useRef} from 'react';
// 👇️ Example of uncontrolled checkbox
export default function App() {
  const ref = useRef(null);
  const handleClick = () => {
    console.log(ref.current.checked);
  };
  return (
    <div>
      <input
        ref={ref}
        type="checkbox"
        id="subscribe"
        name="subscribe"
        defaultChecked={true}
      />
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

import {useState} from 'react';
export default function App() {
  const [isSubscribed, setIsSubscribed] = useState(false);
  const handleChange = event => {
    setIsSubscribed(event.target.checked);
    // 👇️ this is the checkbox itself
    console.log(event.target);
    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };
  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}

import {useState} from 'react';
export default function App() {
  // 👇️ set checked to true initially
  const [isSubscribed, setIsSubscribed] = useState(true);
  const handleChange = event => {
    setIsSubscribed(event.target.checked);
    // 👇️ this is the checkbox itself
    console.log(event.target);
    // 👇️ this is the checked value of the field
    console.log(event.target.checked);
  };
  return (
    <div>
      <input
        type="checkbox"
        id="subscribe"
        name="subscribe"
        onChange={handleChange}
        checked={isSubscribed}
      />
    </div>
  );
}