警告react : setState(...)：只能更新已安装或正在安装的组件

Question

警告: setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未挂载的组件上调用setState()。这是个禁区。

这是一个react应用程序，横幅固定在屏幕上并传递随机图像。它的编写方式是生成有问题的警告。

import React from "react";
import Lightbox from "react-image-lightbox";
import logo from "./logo.png";

class Banner extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
      currentImage: logo,
      isOpen: false,
      sidebarOpen: true
    };
  }

  async componentWillMount() {
    await this.getBanners();
    this.setState({ currentImage: this.state.images[0].url });

    setInterval(async () => {
      await this.getBanners();
    }, 300000);

    let i = 0;
    setInterval(
      () => {
        this.setState({ currentImage: this.state.images[i].url });
        if (i >= this.state.images.length - 1) {
          i = 0;
        } else {
          i++;
        }
      },
      10000,
      i
    );
  }

  async getBanners() {
    const data = await (await fetch("/api/banners/active")).json();
    if (data.true) {
      this.setState({ images: data.true });
    }
  }

  render() {
    const { isOpen } = this.state;

    return (
      <div>
        {isOpen && (
          <Lightbox
            mainSrc={this.state.currentImage}
            onCloseRequest={() => this.setState({ isOpen: false })}
          />
        )}
        <footer>
          <a>
            <img
              width={270}
              height="200"
              src={this.state.currentImage}
              onClick={() => this.setState({ isOpen: true })}
              alt="idk"
            />
          </a>
        </footer>
      </div>
    );
  }
}

export default Banner;

有人能帮助改进这段代码吗？

Answer 1

您可以将从setInterval返回的数字放在您的实例上，并在componentWillUnmount中使用clearInterval停止间隔，这样在卸载组件后，它们就不会继续运行。

class Banner extends React.Component {
  constructor(props) {
    super(props);

    this.bannerInterval = null;
    this.currentImageInterval = null;
    this.state = {
      images: [],
      currentImage: logo,
      isOpen: false,
      sidebarOpen: true
    };
  }

  async componentDidMount() {
    await this.getBanners();
    this.setState({ currentImage: this.state.images[0].url });

    this.bannerInterval = setInterval(async () => {
      await this.getBanners();
    }, 300000);

    let i = 0;
    this.currentImageInterval = setInterval(
      () => {
        this.setState({ currentImage: this.state.images[i].url });
        if (i >= this.state.images.length - 1) {
          i = 0;
        } else {
          i++;
        }
      },
      10000,
      i
    );
  }

  componentWillUnmount() {
    clearInterval(this.bannerInterval);
    clearInterval(this.currentImageInterval);
  }

  // ...
}

Answer 2

将此模板用于具有以下状态的任何基于类的组件：

忘记了setState()，使用setComponentState声明下来：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // other fields...
      isUnmounted: false,
    };
  }

  componentWillUnmount() {
    this.setState({ isUnmounted: true });
  }

  setComponentState = (values) => {
    if (!this.state.isUnmounted) this.setState(values);
  };
}