警告：无法对未安装的组件执行 React 状态更新

Posted 2023-02-22

【中文标题】警告：无法对未安装的组件执行 React 状态更新

【英文标题】：Warning: Can't perform a React state update on an unmounted component

【发布时间】：2019-07-29 04:20:28

【问题描述】：

我正在尝试使用链接将状态发送到另一个组件，但它总是给我这个错误

。

我想知道避免这种冲突的最佳解决方案是什么。

提前致谢

class Home extends Component 
constructor() 
    super()
    this.state = 
        data: ,
        name: ""
    
    this.createRoomHandler = this.createRoomHandler.bind(this)

 createRoomHandler() 

    var settings = 
        "async": true,
        "crossDomain": true,
        "url": "https://api.eyeson.team/rooms",
        "method": "POST",
        "headers": 
            "Authorization": ""

        ,
        "data": 
            "user[name]": this.state.name
        
    



    $.ajax(settings).done((response) => 

        this.setState( data: response );
        console.log("ashraf", response)
    )



  createNamehandler = (e) => 
    this.setState( name: e.target.value )


  componentWillUnmount = () => 
    this.createRoomHandler()

render() 

    return (
        <div className="create-room-container">
            <input onChange=this.createNamehandler />
            <Link to= pathname: "CreateStream", query: 
            this.state.data  > <button onClick= 
            this.createRoomHandler>Create 
  Room</button></Link>
        </div>
    )
  

导出默认主页

【问题讨论】：

React - setState() on unmounted component的可能重复

【参考方案1】：

componentWillUnmount = () => 
  this.createRoomHandler()

首先，您无缘无故地创建了一个箭头函数，它们通常用于没有正确 this 引用的回调。此外，当您不需要时在构造函数中使用.bind，因为您已经在其他地方使用过箭头函数（改用它们）。

您正在调用setState，因为组件正在卸载，这没有意义。如果您想在组件由于某种原因卸载时发出请求，请调用一个不尝试并在不再存在的组件上设置状态的方法（setState 是 async 所以在组件完成后完成应该被删除，因此会导致内存泄漏）例如而是转到 redux 商店。

您将需要取消诸如 setTimeout、setInterval 之类的计时器，取消 XHR 请求（理想情况），否则如果组件已卸载，则在它们完成时不要调用 setState。也不要在请求回调中捕获来自组件的引用，否则也会泄漏内存。