React 功能组件 TypeError：无法读取未定义的属性“props”

Question

经过几个小时的阅读如何绑定它后我放弃了。这是我第一次使用 React，我在 stackoverflow 上查看了 20 多个相关问题，但无法解决我的问题。

我已经按照指南安装了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;

Answer 1

• 你没有定义props
• 不需要this功能组件

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

autoPlay={props.deviceType ...