TypeError: Cannot read property 'state' of undefined when I changed class to function

Question

Error image


const Home = () => {
  React.state = {
    activeIndex: 0,
    animating: false,
  }

  React.setActiveIndex = (i) => {
    this.setState({ activeIndex: i });
  }

  React.setAnimating= (v) => {
    this.setState({ animating: v });
  }

  React.next = () => {
    if (this.state.animating) return;
    const nextIndex =
      this.state.activeIndex === items.length - 1
        ? 0
        : this.state.activeIndex + 1;
    this.setActiveIndex(nextIndex);
  };

  React.previous = () => {
    if (this.state.animating) return;
    const nextIndex =
      this.state.activeIndex === 0
        ? items.length - 1
        : this.state.activeIndex - 1;
    this.setActiveIndex(nextIndex);
  };

  React.goToIndex = (newIndex) => {
    if (this.state.animating) return;
    this.setActiveIndex(newIndex);
  };

  React.slides = items.map((item) => {
    return (
      <CarouselItem
        onExiting={() => this.setAnimating(true)}
        onExited={() => this.setAnimating(false)}
        key={item.src}
      >
        <img src={item.src} alt={item.altText} />
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      </CarouselItem>
    );
  });

  useEffect(() => {
    Aos.init({ duration: 2000 })
  }, [])
  return (
    <>
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "#29323cb3", zIndex: 2 }}>
        </div>
        <Carousel style={{ position: "relative" }}
          activeIndex={this.state.activeIndex}
          next={this.next}
          previous={this.previous}
        >
          <CarouselIndicators
            items={items}
            activeIndex={this.state.activeIndex}
            onClickHandler={this.goToIndex}
          />
          {this.slides}
          <CarouselControl
            direction="prev"
            directionText="Previous"
            onClickHandler={this.previous}
          />
          <CarouselControl
            direction="next"
            directionText="Next"
            onClickHandler={this.next}
          />

        </Carousel>

      </div>    </>
  );

}

Home.propTypes = {};

export default Home;

我想将此组件从 class 更改为正常运行，然后出现此错误。我还得到了“ReferenceError: state is not defined”和“TypeError: Cannot read 属性 'state' of undefined” 我想从 class 更改为添加 aos 动画的功能。那么我该如何解决这些错误。问题主要出在 bootstrap 滑块的代码上。

Answer 1

函数组件里面没有this。你需要使用 useState 钩子重构你的状态。

import React, {useState} from 'react';

const [state, setState] = useState({
    activeIndex: 0,
    animating: false,
})

要更改状态，您可以这样做

如果需要更改activeIndex,

const setActiveIndex = (i) => {
   setState((prevState) => { ...prevState, activeIndex: i });
}

如果需要更改activeIndex,

const setAnimating= (v) => {
    setState((prevState) => { ...prevState, animating: v });
}

您应该将 this.state.activeIndex 个实例更改为 state.activeIndex。同样适用于 animating

您还应该从函数引用中删除 this。例如：而不是，

this.setActiveIndex(nextIndex);

应该是，

setActiveIndex(nextIndex);

希望这有助于重构！！

TypeError: Cannot read property 'state' of undefined when I changed class to function

TypeError: Cannot read property 'state' of undefined when I changed class to function

javascript

typeerror

reactjs