web-dev-qa-db-fra.com

ReactJS SetState ne renvoie pas

J'ai:

JobScreen

handleSetView(mode, e) {
        this.setState({
            view: mode
        });
        console.log(this.state.view)
    }

    render() {
        return (

            <div className="jobs-screen">
                <div className="col-xs-12 col-sm-10 job-list"><JobList view={this.state.view} /></div>
                <div className="col-xs-12 col-sm-2 panel-container">
                    <div className="right-panel pull-right"><RightPanel handleSetView={this.handleSetView} /></div>
...
)
}

RightPanel

render() {
        return (
            <div>
                <div className="controls">
                    <span className="title">Views <img src="images\ajax-loader-bar.gif" width="24" id="loader" className={this.state.loading ? "pull-right fadeIn" : "pull-right fadeOut"}/></span>
                    <button onClick={this.props.handleSetView.bind(this, 'expanded')}><img src="/images/icons/32px/libreoffice.png" /></button>
                    <button onClick={this.props.handleSetView.bind(this, 'condensed')}><img src="/images/icons/32px/stack.png" /></button>
                    </div>
...
)}

Liste d'emplois

render() {
        var jobs = [];
        this.state.jobs.forEach((job) => {
            jobs.Push(
                <Job key={job.id} job={job} view={this.props.view} loading={this.state.loading} toggleTraderModal={this.props.toggleTraderModal} toggleOFTModal={this.props.toggleOFTModal}/>
            );
        });

        return (
            <div>
                {jobs}
            </div>
        );
    };

Le problème est que le changement d'état d'affichage ne rend aucun élément enfant.

Comment puis-je faire en sorte que cela fonctionne?

javascriptreactjsfluxible
9
imperium2335

Je ne sais pas si c'est le cœur de votre problème, mais:

handleSetView={this.handleSetView}

est faux, car comment js lie cela. Utilisation:

handleSetView={this.handleSetView.bind(this)}

au lieu.

Aussi,

this.setState({
  view: mode
});
console.log(this.state.view)

semble étrange; Notez que this.state n'est pas modifié juste après avoir appelé setState, cela peut prendre un certain temps pendant que React distribue l'opération setState planifiée. Mettez cette console.log en rendu pour voir quand il est réellement appelé.

Enfin, assurez-vous que vos composants n'implémentent pas la méthode de cycle de vie shouldComponentUpdate (vous ne le faites probablement pas explicitement, mais si votre composant étend une classe autre que React.Component, cela peut se produire)

6
Tomas Kulich

this est dans le contexte du composant react, donc passez la référence de this à votre fonction handleSetView ou liez this comme mentionné par @Tomas

0
Kartikeya Sharma