javascript - 警告 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);
  }

  // ...
}