Function is bound, but still getting Uncaught TypeError: Cannot read property 'name' of undefined

Question

我基本上是在语义上遵循这个example（第二个）-UI-React exactly，除了我将道具向下传递两个级别。我得到默认的活动状态 'home' 但是当我点击任何 link 我得到这个错误：

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}
        />

任何帮助将不胜感激！

更新

按照 Diesel 的建议，我尝试了：

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

然后在我的函数中呈现 links:

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，使第二个参数不是对象，而直接传递名称字符串。

Function is bound, but still getting Uncaught TypeError: Cannot read property 'name' of undefined

Function is bound, but still getting Uncaught TypeError: Cannot read property 'name' of undefined

reactjs

binding

this

semantic-ui-react

react-state