Problem using a prop in functional component IT Says TypeError: onClick is not a function

Question

我在尝试使用 onclick 函数作为道具时遇到问题，当我单击 TypeError: onClick is not a function 我能做什么！ 7 | <卡片

8 | onClick={() => onClick(dish.id)}> | ^ 9 |

第一次使用这种组件

import React from 'react';
import { Card, CardImg, CardImgOverlay,
    CardTitle } from 'reactstrap';

    function RenderMenuItem ({dish, onClick}) {
        return (
            <Card
                onClick={() => onClick(dish.id)}>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardImgOverlay>
                    <CardTitle>{dish.name}</CardTitle>
                </CardImgOverlay>
            </Card>
        );
    }

    const Menu = (props) => {

        const menu = props.dishes.map((dish) => {
            return (
                <div className="col-12 col-md-5 m-1"  key={dish.id}>
                    <RenderMenuItem dish={dish} onClick={props.onClick} />
                </div>
            );
        });

        return (
            <div className="container">
                <div className="row">
                    {menu}
                </div>
            </div>
        );
    }

export default Menu;

Answer 1

尝试使用默认道具以避免运行时间错误。

const Menu = (props) => {
  const menu = props.dishes.map((dish) => {
    return (
      <div className="col-12 col-md-5 m-1" key={dish.id}>
        <RenderMenuItem dish={dish} onClick={props.onClick} />
      </div>
    );
  });

  return (
    <div className="container">
      <div className="row">{menu}</div>
    </div>
  );
};

Menu.defaultProps = {
  dishes: [],
  onClick: () => {},
};

您现在必须通过提供有效功能来使用 Menu 组件。例如<Menu onClick={dishId => {/* Logic /*}}/>

Problem using a prop in functional component IT Says TypeError: onClick is not a function

Problem using a prop in functional component IT Says TypeError: onClick is not a function

javascript

reactjs

react-functional-component