如何修复 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 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 |       {" "}

产品列表.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>

    );

  }

}

Answer 1

您没有将函数 changeCategory 从 App.js 传递给 ProductList。要将函数作为道具传递，您应该在 App.js 文件中编写如下内容，但您传递的是状态值。<pl&nbsp;changeCategory&nbsp;={this.changeCategory}&nbsp;/>

Answer 2

您在 App.js 中将错误的数据传递给产品列表组件的 changeCategory 道具。您必须为此道具提供功能参考。&nbsp;<Pl&nbsp;uc={titleCategory}&nbsp;changeCategory={this.changeCategory}&nbsp;/>