React-传递需要参数作为道具的函数

Question

我正在尝试将需要参数作为道具的函数传递给子组件，但是在尝试调用它时，它说它不是函数。这些都是功能组件，因此我认为不需要'this'或任何绑定都是必要的。

主要组成部分：

function AppBF() {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    setProducts(data_products);
    setCategories(data_categories.map(category =>({
      ...category,
      selected: true
    })));
  },[]);

  const handleSelectCategory = (id) => {
    setCategories(oldCats => oldCats.map(category => {
      if(category.id === id){
        return {
          ...category,
          selected: !category.selected,
        }
      }else{
        return category;
      }
    }))
  }
  return(
    <div className="bf">
      <h1>Bare Functional</h1>
      <div className="main-area">
        <Products />
        <Categories categories={categories} handleSelectCategory={handleSelectCategory} />
      </div>
    </div>
  );
};

子组件（类别）：

const Categories = (props) => {
  return(
    <div className="categories">
      <h2>Categories</h2>
      <form className="check-form">
        {props.categories.map(category => (
          <label>
            <input
              name={category.id}
              type="checkbox"
              checked={category.selected}
              onChange={() => props.handleInputChange(category.id)}
            />
            {category.name}
          </label>
        ))}
      </form>
    </div>
  );
};

因此，默认情况下，所有类别均被“选中”，但是当我单击其中一个类别（应调用handleSelectCategory函数时，出现错误：handleSelectCategory不是函数。

谢谢。

Answer 1

u传递给子组件的函数名为handleSelectCategory但是在子组件中，调用函数的名称为handleInputChange？

也许您应该调用名为handleSelectCategory的函数？

 <Categories categories={categories} handleSelectCategory={handleSelectCategory} />

const Categories = (props) => {
  return(
    <div className="categories">
      <h2>Categories</h2>
      <form className="check-form">
        {props.categories.map(category => (
          <label>
            <input
              name={category.id}
              type="checkbox"
              checked={category.selected}
              onChange={() => props.handleInputChange(category.id)}
            />
            {category.name}
          </label>
        ))}
      </form>
    </div>
  );
};