函数已绑定，但仍然无法捕获TypeError：无法读取未定义的属性'name'

Question

我本质上是完全按照语义UI响应上的example（第二个），除了我将道具向下传递两个级别。我将默认的活动状态设为“家”，但是当我单击任何链接时，都会出现此错误：

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import {
 Button,
 Container,
 Icon,
 Menu,
 Responsive,
 Segment,
 Sidebar,
 Visibility,
} from 'semantic-ui-react'
import { connect } from 'react-redux'

import { bindActionCreators } from 'redux'
import { logInUser, logOutUser } from '../../store'

import Link from 'next/link';


var comparator;
const GenericIsUserLoggedInLink = React.memo(({ isHomeButton, isLoggedIn, logOutUser, route, anchorText, mobile, name, active, handleItemClick }) => {

 comparator = (prevProps, nextProps) => {

  if (prevProps.isHomeButton !== nextProps.setProps.isHomeButton) {
   return true;
  }
  if (prevProps.isLoggedIn !== nextProps.setProps.isLoggedIn) {
   return true;
  }
  if (prevProps.mobile !== nextProps.setProps.mobile) {
   return true;
  }
  if (prevProps.active !== nextProps.setProps.active) {
   return true;
  }
  return false;
 }

 function currentNav(route, name, active, handleItemClick) {

  console.log("handleItemClick ", handleItemClick);
  console.log("active ", active);
  console.log("name ", name);

  return (
    <Link href={route}>
      <Menu.Item
       key={name}
       name={name}
       active={active === name}
       onClick={handleItemClick} // Should I be passing name into here? i.e. handleItemClick(name)
       >
      </Menu.Item>
     </Link>
  );

 }

 if (isHomeButton) {
  return currentNav(route, name, active, handleItemClick)
 }
 if (isLoggedIn) {
  if (anchorText === undefined) {
   return <Link href="/"><a onClick={() => logOutUser()}>Log out!</a></Link>
  }
  else if (mobile) {
   return currentNav(route, name, active, handleItemClick)
  }
  else if (!(mobile)) {
   return currentNav(route, name, active, handleItemClick)
  }

  else if (anchorText) {
   return <Link href={route}><a>{anchorText}</a></Link>
  }
 } else {
  if (route === "/login") {
   return <Link href="/login"><a>Log in!</a></Link>
  }
  return null
 }
}, comparator);



class DesktopContainer extends Component {
 state = {activeItem : 'home'}

 handleItemClick = (e, { name }) => this.setState({ activeItem: name })


 logOutUser = () => {
  const { logOutUser } = this.props
  logOutUser()
 }

 render() {
  const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props


  const { fixed, activeItem } = this.state

  return (
   <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>

       <Container>

        <GenericIsUserLoggedInLink
         isHomeButton={true}
         route="/"
         name='home'
         active={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />

        <GenericIsUserLoggedInLink
         isLoggedIn={isLoggedIn}
         route="/profile"
         anchorText="Profile"
         name='profile'
         active={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />

        <GenericIsUserLoggedInLink
         isLoggedIn={isLoggedIn}
         route="/dashboard"
         anchorText="Dashboard"
         name='dashboard'
         active={activeItem}
         handleItemClick={this.handleItemClick}
         mobile={false}
        />

任何帮助将不胜感激！

UPDATE

按照柴油机的建议，我尝试过：

<GenericIsUserLoggedInLink
 isHomeButton={true}
 route="/"
 name='home'
 active={activeItem}
 onClick={(e) => this.handleItemClick(e, { name })}
 mobile={false}
/>

然后在呈现链接的我的函数中：

function currentNav(route, name, active) {

  console.log("active ", active);
  console.log("name ", name);


  return (
    <Link href={route}>
      <Menu.Item
       key={name}
       name={name}
       active={active === name}
       >
      </Menu.Item>
     </Link>
  );

 }

但是没有骰子！

Answer 1

onClick={handleItemClick}不发送第二个参数。因此，您的第二个对象是未定义的。因此，您的secondObject.name也未定义。

您的错误说第二个参数是未定义的……什么都没有传递。

查看handling events上的文档。

有此示例：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

尝试：

onClick={(e) => this.handleItemClick(e, {name})}

您还可以重写handleItemClick，以使第二个参数不成为对象，而直接传递名称字符串。