Как исправить ошибку TypeError: this.props.changeCategory не является функцией в React? - PullRequest
Новая
       24

Как исправить ошибку TypeError: this.props.changeCategory не является функцией в React?

2 голосов
/ 24 апреля 2020

Я работаю в среде Sandbox IDE, и у меня проблема с компонентом ProductList, и я пытался добавить функции в приложение. js.

Я передаю функцию в качестве реквизита в компоненте ProductList, но я я получаю сообщение об ошибке TypeError: this.props.changeCategory не является функцией. Я написал код как "onClick={() => this.props.changeCategory(category)}" Я описал эту функцию в приложении. 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 |       {" "}

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;

Приложение. 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;

Может кто-нибудь подсказать, где я не так делаю? Спасибо всем.

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

Вы передавали неверные данные реквизитам ChangeCategory в приложении. js для компонента списка товаров. Вы должны дать ссылку на функцию этого реквизита. 

 <Pl uc={titleCategory} changeCategory={this.changeCategory} />
0 голосов
/ 24 апреля 2020

Вы не передаете функцию changeCategory из приложения. js в ProductList. Чтобы передать функцию в качестве реквизита, вы должны написать, как показано ниже, в файле приложения. js, но вы передаете значение состояния. 

<pl changeCategory ={this.changeCategory} />
...