reactjs中的condition componentWillUnmount

问题描述

单击button时，应使用quote卸载componentwillunmount()，但我通过登录控制台进行检查，完全没有卸载。

import React from "react";

import "./App.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      quote: ""
    };
  }

  handleAction = () => {
    this._isRemoved = true;

    console.log("Clicked");
  };

  componentDidMount() {
    this._isRemoved = false;

    if (!this._isRemoved) {
      this.setState({ quote: "Something" });

      console.log("Mounted");
    }
  }

  componentwillUnmount() {
    this._isRemoved = true;

    console.log("Unmount");
  }

  render() {
    return (
      <div className="App">
        <div>
          <q>{this.state.quote}</q>
          <br />

          <button onClick={this.handleAction}>Click Here</button>
        </div>
      </div>
    );
  }
}

export default App;

解决方法

当您更改页面或使整个组件消失时，将调用此卸载。

您可以像下面的示例一样简单地隐藏或显示元素：

import React from "react";

import "./App.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      quote: "",_isRemoved :false
    };
  }

  handleAction = () => {
    this.setState({
      _isRemoved : true
    })
    console.log("Clicked");
  };

  showAction = () => {
    this.setState({
      _isRemoved : false
    })
    console.log("Clicked");
  };

  componentDidMount() {

    this.setState({ quote: "Something" });

    console.log("Mounted");
    
  }

  componentWillUnmount() {
    this._isRemoved = true;

    console.log("Unmount");
  }

  render() {
    return (
      <div className="App">
        <div>
          {!this.state._isRemoved &&
            <q>{this.state.quote}</q>
          }
          <br />

          <button onClick={this.handleAction}>Hide</button>
          <button onClick={this.showAction}>Show</button>
        </div>
      </div>
    );
  }
}

export default App;