web-dev-qa-db-fra.com

Appeler des fonctions après un changement d'état dans reactjs

Ma question est la suivante. J'ai deux composantes. Le premier composant est un recadrage d'image. Le deuxième composant est celui que je devrais afficher l'image recadrée.

Le problème auquel je suis confronté est que je peux transmettre l'image recadrée à mon deuxième composant, mais je dois appuyer deux fois sur le bouton qui recadre l'image et passer au deuxième composant. Au deuxième clic, seule mon image passe au deuxième composant. Mais je ne peux afficher l'image recadrée dans le premier composant qu'en un seul clic. Je pense que cela se produit parce que dans l'état actuel des changements d'état ne se produisent pas immédiatement. Alors, comment puis-je résoudre ce problème.

Mon approche était de créer une fonction prop dans le 1er composant comme this.props.croppedImage(this.state.preview.img); ici this.state.preview.img est l'image recadrée. Et dans le 2ème composant, j'obtiens l'image recadrée en appelant la fonction prop.

Mon code

1er composant (cropper)

class CropperTest extends React.Component {

    constructor(props) {

        super(props);

        this.state = {
            name: "beautiful",
            scale: 1,
            preview: null,
       }

        this.handleSave = this.handleSave.bind(this);

    }

    handleSave = () => {

        const img = this.editor.getImageScaledToCanvas().toDataURL();

        this.setState({
            preview: {
                img,
                scale: this.state.scale,
            }
        })

        this.props.croppedImage(this.state.preview.img);

    }

    setEditorRef = (editor) => {
        this.editor = editor
    }

    render() {
        return (
            <div>
                <div className="overlay"></div>

                <div className="crop_div">
                    <AvatarEditor
                        image={this.props.cropImage}
                        ref={this.setEditorRef}
                        width={450}
                        height={450}
                        border={50}
                        color={[255, 255, 255, 0.6]} // RGBA
                        scale={this.state.scale}
                        rotate={0}
                    />
                </div>



                <div className="zoom_slider text_align_center">
                    <input className="crop_btn" type='button' onClick={this.handleSave} value='Save'/>

                </div>

            </div>
        )
    }
}

export default CropperTest;

2e composant

Ici, je fais essentiellement ce qui suit.

  <CropperTest  croppedImage = {this.getCroppedImg}/>

    getCroppedImg(img){

            alert("Perfect Storm");
            this.setState({

                previewImg:img

            })

        }
javascriptreactjsprop
7
CraZyDroiD

Je pense que cela se produit parce que dans Reacts les changements d'état ne se produisent pas immédiatement. Alors, comment puis-je résoudre ce problème?

À partir de React#setState ,

setState (programme de mise à jour, [rappel])

setState() met en file d'attente les modifications apportées à l'état du composant. setState ne met pas immédiatement à jour l'état. setState() ne met pas toujours à jour immédiatement le composant. Il peut par lots ou différer la mise à jour à plus tard. Cela fait de la lecture de this.state Juste après avoir appelé setState() un piège potentiel. Au lieu de cela, utilisez componentDidUpdate ou un rappel de setState(setState(updater, callback))

Appelez le this.props.croppedImage Dans le rappel setState. Vous obtiendrez des valeurs mises à jour de l'état du composant. Dans votre cas, son this.state.preview

this.setState({
  preview: {
    img,
    scale: this.state.scale,
  }
}, () => {
  this.props.croppedImage(this.state.preview.img);
})
17
RIYAJ KHAN