状態変化後の呼び出し関数は、reactjsで発生します

Question

私の質問はこれです。私は2つのコンポーネントを持っています。最初のコンポーネントはイメージクロッパーです。 2番目のコンポーネントは、私が切り取った画像を表示するものです。

私が直面している問題は、クロップされた画像を2番目のコンポーネントに渡すことができますが、画像を切り抜き、2番目のコンポーネントに2回渡すボタンを押す必要があります。 2回目のクリックでは、私のイメージは2番目のコンポーネントに渡されます。しかし、私は最初のコンポーネントのクロップされた画像をワンクリックで表示することができます。私はそれが起こっていると思う。なぜなら、反応の状態の変化は直ちに起こっていないからだ。だから私はこれをどのように修正することができます。

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

私のコード

第1成分（クロッパー）

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 

      }) 

     } 

Answer 1

私はreactjs状態変化に即座に発生していないので、それが起こっていると思います。だから私はこれを修正することができますか？コンポーネント状態へReact#setState、

SETSTATE（アップデータ、[コールバック]）

setState()エンキュー変化から

。 setStateはすぐに状態を更新しません。 setState()は、コンポーネントをただちに更新するとは限りません。後で更新されるまで、バッチ処理または遅延処理が行われることがあります。これは、右setState()可能性pitfall.Insteadを呼び出した後this.stateを読みになり、コンポーネントの状態の更新された値を取得しますsetState callback.Youでthis.props.croppedImageをcomponentDidUpdateを使用するか、setStateコールバック(setState(updater, callback))

コール。あなたのケースでは、this.state.preview