Question

我是这个框架的新手，我知道这是重复的问题，但是我想找到解决问题的方法。

因为我项目的每个页面都有内存泄漏警告。我只是在YouTube上观看有关CRUD的视频。

我在这里有示例代码。

我的构造函数：

    constructor() {
    super();
    this.state = {
        job_details:[]
    }
}

我的ComponentWillMount：

componentWillMount() {
    const id = this.props.match.params.id;
    axios.get('/api/job_details/'+ id).then(response => {
        this.setState({
            job_details: response.data
        })
    }).catch(error => console.log(error));
}

我的JSX：

render() {
    return (
        <div>
            <div className="header">
                <div className="jumbotron">
                    <h1>Careers</h1>
                    <center><p id="sub-header">Grabe the Opportunity Now!</p></center>
                </div>
                {this.state.job_details.map((details,i) => {
                    if(details.location == null)
                    {
                        return (
                            <div>
                                <div className="container">
                                    <b>
                                    <h2 className="title">{details.position_name}</h2>
                                    </b>
                                    <p>{details.position_desc}</p>
                                    <Link to={"/job/online-application/"+ details.id} className="btn btn-outline-primary float-right">Apply</Link>
                                    <br/><br/>
                                </div>
                            </div>
                        )
                    }
                    else
                    {
                        return (
                            <div>
                                <br/><br/>
                                <div className="container">
                                    <b>
                                    <h2 className="title">{details.position_name} - {details.location} </h2>
                                    </b>
                                    <br/>
                                    <h5><b>Position Description</b></h5>
                                    <p>{details.position_desc}</p>

                                    <br/>
                                    <h5><b>Position Requirements </b></h5>
                                    <p>{details.position_requirements}</p>
                                    <Link to={"/job/online-application/"+ details.id } className="btn btn-outline-primary float-right">Apply</Link>
                                    <br/><br/>
                                </div>
                            </div>
                        )
                    }
                })}
            </div>
            <br/><br/><br/><br/>

        </div>
    )
}

Answer 1

将ComponentWillMount更改为ComponentDidMount .....实际上，您是在组件安装之前发生的生命周期挂钩中调用setState。正在卸载的组件上调用set状态。如果将此逻辑放在componentDidMount中，则组件将被安装:)

Answer 2

您可以尝试以下方法：

在jsx文件中添加变量_isMounted：

  _isMounted = false;

然后将componentWillMount的代码添加到componentDidMount。

componentDidMount() {
    this._isMounted = true; //set _isMounted to true.

    const id = this.props.match.params.id;
    axios.get('/api/job_details/'+ id).then(response => {
        if(_isMounted){
        this.setState({
            job_details: response.data
        })
        }
    }).catch(error => console.log(error));
}

然后添加componentWillUnmount()方法。

componentWillUnmount() {
    this._isMounted = false;
}

内存泄漏ReactJs应用

2 个答案: