Reactjs JS应用程序的内存泄漏

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

因为我项目的每一页都有内存泄漏警告。我只是在youtube上看关于CRUD的视频

我这里有我的样本代码

我的构造函数：

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

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));
}

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>
    )
}

我的组件将挂载：

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

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));
}

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>
    )
}

我的JSX:

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

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));
}

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>
    )
}

render（）{
返回(
事业
现在就抓住机会
{this.state.job_details.map（（details，i）=>{
if（details.location==null）
{
返回(
{details.position_name}
{details.position_desc}

申请



)
}
其他的
{
返回(



{details.position_name}-{details.location}


职位描述
{details.position_desc}



职位要求
{详细信息.职位要求}

申请



)
}
})}






)
}

将

组件将挂载

更改为

组件挂载

。。。。。实际上，您正在组件挂载之前发生的生命周期挂钩中调用

setState

。。。然后，您会收到一个错误，说明您正在对未安装的组件调用set state。如果将此逻辑放入

componentDidMount

中，则组件将被装入：）

您可以尝试以下操作：

将变量_isMounted添加到jsx文件中：

  _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));
}

然后添加

组件willunmount（）

方法

componentWillUnmount() {
    this._isMounted = false;
}

---

始终将

道具

添加到

构造函数

中，然后将其传递给

super

。问题可能出在您显示的代码之外。在您等待数据通过时，是否有其他人正在卸载您正在显示的组件？嗨，Joey，可以给我样本吗？`componentDidMount（）{const id=this.props.match.params.id；axios.get（'/api/job_details/'+id）。然后（response=>{this.setState（{job_details:response.data}）}）.catch（错误=>console.log（错误））；}`