Question

我有一个很大的个人项目，我发现（在3个月的代码之后）我的组件都没有卸载。

我创建了一个new-react-app来在全新的环境中进行测试，但它也没有用。

这是我的班级：

import React, { Component } from 'react';
import logo from './logo.svg';
import Test from './Test'
import './App.css';

class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      test: true
    }

    this.test = this.test.bind(this)
  }

  test(){
    this.setState({
      test: !this.state.test
    })
  }

  render() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>

          {this.state.test ? <Test /> :null}
          <button onClick={this.test}/>
        </div>
      )

  }
}

export default App;

这是控制台的结果

console

感谢您的时间！

编辑：我发现在每个班级我总是称组件 S WillUnmount而不是componentWillUnmount ...谢谢大家

Answer 1

当您切换test状态时，您的Test组件会卸载。您可能会查看一些不正确的信息。请参阅下面的代码段

＆＃13;

class App extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      test: true
    }

    this.test = this.test.bind(this)
  }

  test(){
    this.setState({
      test: !this.state.test
    })
  }

  render() {
      return (
        <div className="App">
          <header className="App-header">
            
            <h1 className="App-title">Welcome to React</h1>
          </header>

            {this.state.test ? <Test /> :null}
  <button onClick={this.test}/>
        </div>
      )

  }
}

class Test extends React.Component {
  componentDidMount() {
    console.log('mounted');
  }
  componentWillUnmount () {
   console.log('unmounting');
  }

  render() {
      return (
        <div className="test">
          Hello
        </div>
      )

  }
}


ReactDOM.render(<App/>, document.getElementById('app'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

＆＃13;

无法卸载组件

1 个答案: