Question

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

警告：无法在已卸载的组件上执行React状态更新。

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

在此先感谢

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

}

导出默认主页

Answer 1

componentWillUnmount = () => {
  this.createRoomHandler()
}

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

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

警告：无法在已卸载的组件上执行React状态更新

1 个答案: