web-dev-qa-db-ja.com

reactjsで状態変更が発生した後に関数を呼び出す

私の質問はこれです。 2つのコンポーネントがあります。最初のコンポーネントは画像クロッパーです。 2番目のコンポーネントは、トリミングされた画像を表示するコンポーネントです。

私が直面している問題は、トリミングした画像を2番目のコンポーネントに渡すことができますが、画像をトリミングして2番目のコンポーネントに渡すボタンを2回押す必要があります。 2回目のクリックでは、画像のみが2番目のコンポーネントに渡されます。しかし、私は最初のコンポーネントでトリミングされた画像をワンクリックでのみ表示できます。 reactjsの状態変化がすぐには起こらないので、それが起こっていると思います。どうすればこれを修正できますか？.

私のアプローチは、最初のコンポーネントにprop関数をthis.props.croppedImage(this.state.preview.img);として作成することでしたthis.state.preview.imgはトリミングされた画像です。そして、2番目のコンポーネントでは、prop関数を呼び出して、トリミングされた画像を取得しています。

私のコード

最初のコンポーネント（クロッパー）

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;

2番目のコンポーネント

ここでは基本的に次のことを行っています。

  <CropperTest  croppedImage = {this.getCroppedImg}/>

    getCroppedImg(img){

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

                previewImg:img

            })

        }
javascriptreactjsprop
7
CraZyDroiD

reactjsの状態変化がすぐに発生していないので、それは起こっていると思います。どうすればこれを修正できますか？

_React#setState_ から、

setState（updater、[callback]）

setState()は、コンポーネントの状態の変更をキューに入れます。 setStateはすぐに状態を更新しません。 setState()は常にコンポーネントをすぐに更新するわけではありません。更新をバッチ処理するか、後で延期する場合があります。これにより、setState()を呼び出した直後に_this.state_を読み取ることが潜在的な落とし穴になります。代わりに、componentDidUpdateまたはsetStateコールバック_(setState(updater, callback))_を使用してください

setStateコールバックで_this.props.croppedImage_を呼び出します。コンポーネントの状態の更新された値を取得します。あなたの場合、その_this.state.preview_

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