javascript - 类型错误：对象预期 onClick

问题描述

将 onclick 函数作为菜单 component.js 中的道具从主组件代码传递时出错正在编译没有错误，但是当单击任何菜以获取从主组件传递 onclick 作为道具的详细信息时出现错误

codwe 在没有 onclick 函数的情况下工作得很好，没有将它作为 props 传递并直接从另一个组件而不是 main 调用它，但这会违反单一责任规则

浏览器错误

类型错误：对象预期
onClick

| function RenderMenuItem ({dish, onClick}) {
   6 |     return (
   7 |         <Card
>  8 |             onClick={() => onClick(dish.id)}>
     | ^
   9 |             <CardImg width="100%" src={dish.image} alt={dish.name} />
  10 |             <CardImgOverlay>
  11 |                 <CardTitle>{dish.name}</CardTitle>

代码

主要组件.js

import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './MenuComponent';
import DishDetail from './DishdetailComponent';
import { DISHES } from '../shared/dishes';

class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
        dishes: DISHES,
        selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({ selectedDish: dishId});
  }

  render() {
    return (
      <div>
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu dishes={this.state.dishes} onClick={(dishId) =>{ this.onDishSelect(dishId)}} />
        <DishDetail dish={this.state.dishes.filter((dish) => dish.id === this.state.selectedDish)[0]} />
      </div>
    );
  }
}

export default Main;

菜单组件.js

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;

标签： javascriptreactjs

您没有将onClick回调传递给MenuinApp

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    };
  }

  render() {
    return (
      <div>
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu
          dishes={this.state.dishes}
          onClick={dishId => console.log("dishId", dishId)} // <-- pass onClick callback
        />
      </div>
    );
  }
}

javascript - 类型错误：对象预期 onClick

问题描述

解决方案

推荐阅读