使用slick-slider时触发this.setState is not a function错误求解决

你遇到的错误根本原因是混淆了函数组件和类组件的语法——你的代码是函数组件（function SimpleSlider()），却使用了类组件的state和this.setState写法，和TypeScript无关。以下是修复方案：

关键修复点 #

• 用React函数组件的useState钩子替代类组件的state
• 移除所有this引用，调整事件处理函数和状态访问的写法

修复后的完整代码 #

import Slider from "react-slick";
import { useState } from "react"; // 引入useState钩子
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styled from "styled-components";

const array = [
  {
    id: 1,
    text: "page1"
  },
  {
    id: 2,
    text: "page2"
  },
  {
    id: 3,
    text: "page3"
  }
];

export default function SimpleSlider() {
  // 用useState初始化当前轮播索引状态
  const [currentSlide, setCurrentSlide] = useState(0);

  // 调整事件处理函数，直接用setCurrentSlide更新状态
  const handleAfterChange = (index) => {
    console.log("after change", index);
    setCurrentSlide(index);
  };

  const settings = {
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    beforeChange: function (currentSlide, nextSlide) {
      console.log("before change", currentSlide, nextSlide);
    },
    afterChange: handleAfterChange // 直接引用函数，无需this
  };

  return (
    <Wrap>
      <Slider {...settings}>
        {array.map((element) => {
          return (
            <div
              className={`sliderWrap ${element.id === 1 ? "num1" : element.id === 2 ? "num2" : "num3"}`}
              key={element.id}
            >
              <h3>{element.text}</h3>
            </div>
          );
        })}
      </Slider>
      {/* 直接访问状态变量，无需this.state */}
      <div>{currentSlide + 1} / {array.length}</div>
    </Wrap>
  );
}

const Wrap = styled.div`
  .sliderWrap.num1 {
    background-image: url("https://shopimg.kakaofriendsgolf.com/live/images/2023/1/2/10/117580_1672622112593.png");
    background-color: #fff3dd;
    height: 740px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 740px;
    display: flex !important;
    align-items: center;
  }

  .sliderWrap.num2 {
    background-image: url("https://shopimg.kakaofriendsgolf.com/live/images/2022/12/19/10/922469_1671412154586.png");
    background-color: #f8d58a;
    height: 740px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 740px;
    display: flex !important;
    align-items: center;
  }

  .sliderWrap.num3 {
    background-image: url("https://shopimg.kakaofriendsgolf.com/live/images/2022/11/16/13/853128_1668573855540.png");
    background-color: #a9d7f1;
    height: 740px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 740px;
    display: flex !important;
    align-items: center;
  }
`;

改动说明 #

1. 引入useState：函数组件需要通过React提供的useState钩子来管理状态
2. 状态初始化：const [currentSlide, setCurrentSlide] = useState(0)创建状态变量和更新函数，替代类组件的state = { currentSlide: 0 }
3. 事件处理函数：handleAfterChange改为普通函数，用setCurrentSlide(index)更新状态，无需this.setState
4. 配置项调整：settings中的afterChange直接引用handleAfterChange，不需要this
5. 页码显示：直接使用currentSlide变量，去掉this.state的引用

内容的提问来源于stack exchange，提问作者DgUZH