时间戳

首页 > 解决方案 > 向父组件发送状态冻结当前组件

javascript - 向父组件发送状态冻结当前组件

问题描述

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

我想将 chambre 的状态发送到 app.js （它也将接收患者状态，以便将患者放入房间）

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

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

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

状态未更新，我收到此警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在 Chambre（在 App.js:98）中的组件中（由 Route 创建）-</p>

我想帮助理解为什么。谢谢

这是我的代码

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

}

标签： javascriptreactjs

解决方案

将json设置为状态后，this.setState({liste_chambre : 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)
}

这可能会删除警告

推荐阅读