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

警告：无法对已卸载的组件执行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>
    )
  }

}

导出默认主页