Функция связана, но все еще получает Uncaught TypeError: Невозможно прочитать свойство 'name' из undefined

Question

Я, в сущности, следую этому примеру (второму) в Semantic-UI-React точно, за исключением того, что я пропускаю подпорки на два уровня. Я получаю активное состояние по умолчанию «home», но когда я нажимаю любую ссылку, я получаю эту ошибку:

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

Любая помощь будетприветствуется!

ОБНОВЛЕНИЕ

Как и предполагал Дизель, я попытался:

<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 также не определен.

Ваша ошибка говорит о том, что второй аргумент не определен ... ничего не передается.

Проверьте документы по обработка событий .

Вот этот пример:

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

Попробуйте:

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

Вы также можете переписать свой handleItemClick toне иметь второго аргумента как объекта и просто передать строку имени напрямую.