React组件传参报错：TypeError: changeChecked is not a function

我尝试将changeChecked作为props从父组件传递给子组件，用于捕获输入元素的id，但出现错误：TypeError: changeChecked is not a function。以下是子组件和父组件代码，请帮忙解决。

子组件代码 #

import { useState, useEffect } from 'react';

const CheckBox = ({ changeChecked, section }) => {
    return (
        <>
            {section.options.map((option, optionIdx) => (
                <div key={option.value} className="flex items-center">
                    <input
                        id={`filter-${section.id}-${optionIdx}`}
                        name={`${section.id}[]`}
                        defaultValue={option.value}
                        type="checkbox"
                        defaultChecked={option.checked}
                        onChange={() => changeChecked(option.id)}
                        className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
                        
                    />
                    <label
                        htmlFor={`filter-${section.id}-${optionIdx}`}
                        className="ml-3 lg:text-sm min-w-0 flex-1 text-gray-500"
                    >
                        {option.label}
                    </label>
                </div>
            ))}
            
        </>
    )
}

export default CheckBox;

父组件代码 #

import CheckBox from "../pages/collections/checkbox"
export default function App() {
const filters = [
    {
        id: 'brand',
        name: 'Brands',
        options: [
            { value: 'Casio', label: 'Casio', checked: false },
            { value: 'Yamaha', label: 'Yamaha', checked: false },
        ],
    },
]

  const onChangeChecked = (id)=>{
    console.log(id)
  }

  return (
    <div className="App">
 {filters.map((section) => (
      <CheckBox section={section} changeChecked={onChangeChecked} />
 ))}
    </div>
  );
}

解决方案 #

1. 确认组件导入路径正确性 #

父组件中导入CheckBox的路径为../pages/collections/checkbox，必须确保该路径指向的文件就是你编写的子组件文件，避免导入了同名的空组件或未正确导出的组件。如果路径错误，子组件无法接收到正确的changeChecked函数，就会触发该错误。

2. 给子组件props添加默认值 #

在子组件中为changeChecked设置默认空函数，防止因意外未传递该props导致报错：

const CheckBox = ({ changeChecked = () => {}, section }) => {
    // 原有组件逻辑不变
}

3. 修复option对象的id属性缺失问题 #

你当前的option对象没有id字段（父组件的filters中仅定义了value、label、checked），调用changeChecked(option.id)时会传入undefined。如果需要捕获option的唯一标识，要么给option添加id字段：

options: [
    { id: 'casio', value: 'Casio', label: 'Casio', checked: false },
    { id: 'yamaha', value: 'Yamaha', label: 'Yamaha', checked: false },
]

要么改为传递option.value作为标识：

onChange={() => changeChecked(option.value)}

4. 检查所有CheckBox组件的使用场景 #

确保项目中所有使用CheckBox组件的地方都正确传递了changeChecked props，若有其他地方未传递该函数，也会触发同样的错误。

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