Javascript 如何修复TypeError：this.props.changeCategory不是React中的函数？

我在代码沙盒中工作，我对组件ProductList有问题，我试图在App.js中添加函数

我在组件ProductList中将函数作为props传递，但在显示TypeError时出错：this.props.changeCategory不是函数。我编写的代码是“

onClick={（）=>this.props.changeCography（category）}

”
我在App.js中将此函数描述为

changeCategory = category => {
    this.setState({ currentCategory: category.categoryName });
  };

我的错误消息：

    TypeError
_this2.props.changeCategory is not a function
onClick
/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 |       {" "}

TypeError
_this2.props.changeCategory不是一个函数
onClick
/src/components/ProductList.js:21:40
18 | 
19 |{this.state.categories.map（category=>(
20 | 21 | onClick={（）=>this.props.changeCategory（category）}
|                                ^
22 | key={category.categoryId}
23 |     >
24 |       {" "}

ProductList.js

import 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>
    );
  }
}
export default ProductList;

import React，{Component}来自“React”；
从“reactstrap”导入{ListGroup，ListGroupItem}；
导入“./styles.css”；
类ProductList扩展组件{
状态={
类别：[
{categoryId:1，categoryName:“饮料”}，
{categoryId:2，categoryName:“单面朝上”}，
{categoryId:3，categoryName:“What ts sup”}
]
};
render（）{
返回(
{this.props.uc}
{this.state.categories.map（category=>(
this.props.changeCegory（category）}
key={category.categoryId}
>
{" "}
{category.categoryName}{”“}
))}
{this.props.currentCategory}
);
}
}
导出默认产品列表；

App.js

import React, { Component } from "react";
import "./styles.css";
import Navi from "./components/Navi";
import Cl from "./components/CategoryList";
import { Container, Row, Col } from "reactstrap";
import Pl from "./components/ProductList";

class App extends Component {
  state = { currentCategory: " " };

  changeCategory = category => {
    this.setState({ currentCategory: category.categoryName });
  };
  render() {
    let titleCategory = "List One";
    let CategoryInfo = { uc: "List Two" };

    return (
      <div className="App">
        <Container>
          <Row>
            <Navi />
          </Row>

          <Row>
            <Col xs="4">
              <Pl
                uc={titleCategory}
                changeCategory={this.state.changeCategory}
              />
            </Col>
            <Col xs="8">
              <Cl info={CategoryInfo} />
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}
export default App;

import React，{Component}来自“React”；
导入“/styles.css”；
从“/components/Navi”导入Navi；
从“/components/CategoryList”导入Cl；
从“reactstrap”导入{Container，Row，Col}；
从“/components/ProductList”导入Pl；
类应用程序扩展组件{
状态={currentCategory:”“}；
changeCategory=类别=>{
this.setState（{currentCategory:category.categoryName}）；
};
render（）{
让titleCategory=“列出一个”；
让CategoryInfo={uc:“列表二”}；
返回(
);
}
}
导出默认应用程序；

---

有人能告诉我哪里做错了吗？谢谢大家。

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

<pl changeCategory ={this.changeCategory} />

---

您在App.js中为产品列表组件向changeCategory道具传递了错误的数据。您必须为此道具提供函数引用

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

changeCategory={this.changeCategory}这是一个函数，不是一个状态值。哦，你说得对，多谢了……问题解决了吗？