React新手求助：Checkbox子组件通过useEffect向父组件传值问题

原代码存在的问题： #

• Checkbox组件中handleChange的状态更新错误：setIsChecked({isChecked: !isChecked})把布尔类型的isChecked改成了对象，导致复选框选中状态判断失效。
• useEffect未指定依赖项：组件每次渲染都会触发sendData，造成不必要的重复调用。
• App组件状态设计不合理：ownDevice用布尔值无法存储具体设备名称，没法实现显示选中设备的需求。
• 部分Checkbox未传递sendData属性：desktop和phone的子组件没传回调函数，无法将选中状态同步给父组件。
• 显示逻辑错误：displayDevice是函数但未调用，且参数逻辑完全错误，没法获取到设备名称。

修正后的代码： #

Checkbox.jsx

import { useState, useEffect } from "react"

const Checkbox = ({ label, name, sendData}) => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    // 正确更新布尔类型的选中状态
    setIsChecked(!isChecked);
  }
  
  useEffect(() => {
    // 把设备名称和选中状态一起传给父组件
    sendData({ name, isChecked });
  }, [isChecked, sendData, name]) // 添加依赖项，仅当状态或属性变化时触发

  return (
    <div className="checkbox-wrapper">
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleChange}
          name={name}
        />
        <span>{label}</span>
      </label>
    </div>
  );
};

export default Checkbox;

App.js

import { useState } from 'react';
import Checkbox from './components/Checkbox';
import './App.css';

function App() {
  // 用数组存储选中的设备名称，支持多选场景
  const [ownDevices, setOwnDevices] = useState([]);

  const sendData = (childData) => {
    const { name, isChecked } = childData;
    setOwnDevices(prevList => {
      if (isChecked) {
        // 选中时添加设备到数组
        return [...prevList, name];
      } else {
        // 取消选中时从数组移除设备
        return prevList.filter(device => device !== name);
      }
    });
  }

  return(
    <div className="App">
      <h1>What devices do you own?</h1>
      {/* 给所有Checkbox都传递sendData回调 */}
      <Checkbox label="laptop" name="laptop" sendData={sendData} />
      <Checkbox label="desktop" name="desktop" sendData={sendData} />
      <Checkbox label="phone" name="phone" sendData={sendData} />
      {/* 直接根据选中状态渲染内容 */}
      <p>
        {ownDevices.length > 0 
          ? `你选中的设备：${ownDevices.join('、')}` 
          : '请勾选你拥有的设备'}
      </p>
    </div>
  )
}

export default App;

修复说明： #

1. 修正Checkbox的状态更新逻辑，确保isChecked始终是布尔值，复选框状态正常工作。
2. 给useEffect添加依赖项，避免无意义的重复调用sendData。
3. 父组件改用数组存储选中的设备，支持单/多选场景，逻辑更灵活。
4. 所有子组件都传递sendData，保证每个复选框的状态都能同步到父组件。
5. 简化显示逻辑，直接基于父组件的状态渲染结果，去掉冗余的函数。

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