如何修复 TypeError：this.props.changeCategory 不是

Question

我在代码 Sandbox IDE 中工作，组件 ProductList 有问题，我尝试在 App.js 中添加函数。我在组件 ProductList 中将函数作为道具传递，但出现错误，显示 TypeError:this.props.changeCategory is not a function。我将代码编写为“ onClick={() => this.props.changeCategory(category)}”我在 App.js 中将这个函数描述为changeCategory = category => {    this.setState({ currentCategory: category.categoryName });  };我的错误信息：    TypeError_this2.props.changeCategory is not a functiononClick/src/components/ProductList.js:21:40  18 | <ListGroup>  19 |   {this.state.categories.map(category => (  20 |     <ListGroupItem> 21 |       onClick={() => this.props.changeCategory(category)}     |                                ^  22 |       key={category.categoryId}  23 |     >  24 |       {" "}产品列表.jsimport React, { Component } from "react";import { ListGroup, ListGroupItem } from "reactstrap";import "../styles.css";class ProductList extends Component {  state = {    categories: [      { categoryId: 1, categoryName: "Beverages" },      { categoryId: 2, categoryName: "Sunny Side UP" },      { categoryId: 3, categoryName: "Whats sup" }    ]  };  render() {    return (      <div>        <h3> {this.props.uc} </h3>        <ListGroup>          {this.state.categories.map(category => (            <ListGroupItem              onClick={() => this.props.changeCategory(category)}              key={category.categoryId}            >              {" "}              {category.categoryName}{" "}            </ListGroupItem>          ))}        </ListGroup>        <form className="f">{this.props.currentCategory}</form>      </div>    );  }}

Answer 1

您没有将函数 changeCategory 从 App.js 传递给 ProductList。要将函数作为道具传递，您应该在 App.js 文件中编写如下内容，但您传递的是状态值。

<pl changeCategory ={this.changeCategory} />

Answer 2

您在 App.js 中将错误的数据传递给产品列表组件的 changeCategory 道具。您必须为此道具提供功能参考。

 <Pl uc={titleCategory} changeCategory={this.changeCategory} />