Question

我正在开始一个反应项目。我要在我的主要app.js中处理2个组件（“房间”（一个房间）和“患者”（用户））。我目前正在做“ chambre”，目前一切正常。

我想将chambre的状态发送到app.js（为了将患者放在房间中，它还将接收Patient.state）

它有效，但是当我取消注释

this.props.update("chambre",json); inside chambre.componentdidmount()

渲染中的输入和state.id_chambre拒绝更改， <td className="resume">{this.aff_liste_chambre()}</td> 不再显示任何内容。

状态没有更新，我知道了警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要解决此问题，请在componentWillUnmount方法中取消所有订阅和异步任务。（由Route创建）在Chambre中（在App.js：98处）–

我想帮助您了解原因。谢谢

这是我的代码

class Chambre extends Component {
constructor(props){
    super(props);
    this.state = { 
        liste_chambre : [] ,
        id_chambre : 0,
        idpatient : 0,
        deplacement : -1
    }
    this.show_id = this.show_id.bind(this);
    this.gerer_chambre = this.gerer_chambre.bind(this);
    this.aff_liste_chambre =this.aff_liste_chambre.bind(this); 
    this.changer_filtre = this.changer_filtre.bind(this);
    this.ajouter_patient = this.ajouter_patient.bind(this);
    this.plein = this.plein.bind(this);
    this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
    this.timerID = setInterval(() => {
        fetch( "http://localhost:8000/api/v1/rooms" , { method: "GET" })
        .then((response) => {
            return response.json();
        }).then((json) => {
            this.setState({liste_chambre : json});
          //  this.props.update("chambre",json);
        })  
    }, 1000 );   
} 
handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
}
render() {
    return (<div>
            <table>
                <thead>
                    Gerer la chambre numéro : 
                    <input type= "number" name= "id_chambre" onChange= {this.handleChange}
                    value= {this.state.id_chambre} />
                </thead>
                <td>{this.gerer_chambre()}</td>
                <td className="resume">{this.aff_liste_chambre()}</td>
            </table>
        </div>);
}

class App extends Component {

constructor(props){
    super(props);
    this.state = {
        patient : [],
        chambre : [],
        filtre : [],
        personnel : []
    }
    this.deplacer_patient = this.deplacer_patient.bind(this);
    this.changer_filtre = this.changer_filtre.bind(this);
    this.achat_filtre = this.achat_filtre.bind(this);
    this.chekcNotPatient = this.chekcNotPatient.bind(this);
    this.handleChange = this.handleChange.bind(this);
}
componentDidMount() {
}

componentWillUnmount() {
}


handleChange(name,value) {
    this.setState({ [name] : value });
}

render() {
    return(
        <div>

            < BrowserRouter >
                < div >
                    <header className="App-header">
                        <a className="App-link"
                            href="https://reactjs.org"
                            target="_blank"
                            rel="noopener noreferrer">
                            <Clock />
                        </a>
                        < ul >
                            < li >< Link to= "/resume" > Resume </ Link ></ li >
                            < li >< Link to= "/patient" > Patient </ Link ></ li >
                            < li >< Link to= "/chambre" > Chambre </ Link ></ li >
                            </ ul >
                    </header>
                    < Route path= "/resume" component= {() => < Resume />} />
                    < Route path= "/patient" component= {() => < Patient />} />
                    < Route path= "/chambre" component= {() => < Chambre onDeplace={this.deplacer_patient} onFiltre={this.changer_filtre} PatientDoNotExist={this.checkNotPatient} update={this.handleChange}/>} /> 

                    </ div >
                </ BrowserRouter >
        </div>)
}

}

Answer 1

使用this.setState({liste_chambre : json});将json设置为状态后，您可以在组件的任何位置使用它，因此，如果要将其发送给父级，则可以使用componentDidUpdate`

componentDidUpdate(prevProps, prevState){
    if(prevState.liste_chambre!==this.state.liste_chambre){
         this.props.update("chambre",this.state.liste_chambre);
    }
}

别忘了用

清理间隔

componentWillUnmount(){
    clearInterval(this.timerID)
}

这可能会删除警告

将状态发送到父组件冻结当前组件

1 个答案: