反应功能组件类型错误：无法读取未定义的属性“道具”答案

【问题标题】：React functional component TypeError: Cannot read property 'props' of undefined反应功能组件类型错误：无法读取未定义的属性“道具”
【发布时间】：2020-03-15 12:48:08
【问题描述】：

在阅读了如何绑定 this 之后，我放弃了。这是我第一次使用 react，我在 stackoverflow 上查看了 20 多个相关问题，但我无法解决我的问题。

我在guidelines之后安装了react-multi-carousel组件。

我只是复制并粘贴了常用代码，但出现了这个烦人的错误：

TypeError: Cannot read property 'props' of undefined
Index
src/views/Index.js:107
  104 | responsive={responsive}
  105 | ssr={true} // means to render carousel on server-side.
  106 | infinite={true}
> 107 | autoPlay={this.props.deviceType !== "mobile" ? true : false}
      | ^  108 | autoPlaySpeed={1000}
  109 | keyBoardControl={true}
  110 | customTransition="all .5"

我尝试遵循我找到的几乎所有答案（主要是绑定 this）但没有成功。

这是我的代码：

import React from "react";

// reactstrap components
import {
  Container
} from "reactstrap";


import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

// core components
import ScrollTransparentNavbar from "components/Navbars/ScrollTransparentNavbar.js";
import IndexHeader from "components/Headers/IndexHeader.js";




const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    slidesToSlide: 3, // optional, default to 1.
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    slidesToSlide: 2, // optional, default to 1.
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    slidesToSlide: 1, // optional, default to 1.
  },
};


function Index() {


  React.useEffect(() => {
    document.body.classList.add("index-page");
    document.body.classList.add("sidebar-collapse");
    document.documentElement.classList.remove("nav-open");
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
    return function cleanup() {
      document.body.classList.remove("index-page");
      document.body.classList.remove("sidebar-collapse");
    };
  });
  return (
    <>
      <ScrollTransparentNavbar />
      <div className="wrapper">
          <IndexHeader />
          <Carousel
            swipeable={false}
            draggable={false}
            showDots={true}
            responsive={responsive}
            ssr={true} // means to render carousel on server-side.
            infinite={true}
            autoPlay={this.props.deviceType !== "mobile" ? true : false}
            autoPlaySpeed={1000}
            keyBoardControl={true}
            customTransition="all .5"
            transitionDuration={500}
            containerClass="carousel-container"
            removeArrowOnDeviceType={["tablet", "mobile"]}
            deviceType={this.props.deviceType}
            dotListClass="custom-dot-list-style"
            itemClass="carousel-item-padding-40-px">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
            <div>Item 4</div>
          </Carousel>
        </div>
      </div>
    </>
  );
}

export default Index;

【问题讨论】：

标签： javascript reactjs react-props

【解决方案1】：

你没有定义props
函数组件中不需要this

const Index = (props) => { ...
// or
function Index(props) {...

autoPlay={props.deviceType ...

【讨论】：

【解决方案2】：

在你的函数组件中你应该像这样添加道具

function Index(props) {
...
}

【讨论】：

【解决方案3】：

一个函数组件不是通过this.props获取它的props，而是将它们作为一个对象来获取，它是函数的第一个参数。

function Index (props) {
  // ...
  return (
    // ...
      autoPlay={props.deviceType !== mobile}
  )
}

【讨论】：