【问题标题】:reactjs error : TypeError: Cannot read property 'props' of undefinedreactjs错误:TypeError:无法读取未定义的属性'props'
【发布时间】:2020-08-21 18:53:08
【问题描述】:

我正在从一些课程/视频中学习 reactjs,到目前为止我真的很不擅长,我检查了几次,我看不到错误。所以我无法理解这个错误。有人可以帮忙吗?? 这是我的代码:

import React, { useState } from 'react';
import CartSummary from './CartSummary'


import CategoryList from './CategoryList'
import ProductList from './ProductList'
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText
} from 'reactstrap';

const Navi = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">Nortwind App</NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
            </NavItem>
            <CartSummary cart={this.props.cart}></CartSummary>
          </Nav>
          <NavbarText>Simple Text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

export default Navi;

这是错误:

 37 |     <NavItem>
  38 |       <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
  39 |     </NavItem>
> 40 |     <CartSummary cart={this.props.cart}></CartSummary>
     | ^  41 |   </Nav>
  42 |   <NavbarText>Simple Text</NavbarText>
  43 | </Collapse>

有人可以帮帮我吗?

【问题讨论】:

  • 这里不需要this 关键字。它通常与基于类的组件一起使用。您正在使用反应功能组件。
  • 你认为this在这里指的是什么? props 已被声明为你的胖箭头函数的参数...没有this

标签: javascript reactjs


【解决方案1】:

问题出在这一行

&lt;CartSummary cart={this.props.cart}&gt;&lt;/CartSummary&gt;

这里需要写

&lt;CartSummary cart={props.cart}&gt;&lt;/CartSummary&gt; 当你使用功能组件时

【讨论】:

    【解决方案2】:

    这里不必使用关键字 this,因为它的功能组件。

    顺便说一句,我建议您阅读有关 prop-types 库的信息。它可以帮助您定义默认道具以避免未定义的道具错误。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-06
      • 2022-07-22
      • 2019-05-07
      • 2020-07-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多