在reactjs中发生状态改变后调用函数 [英] Calling functions after state change occurs in reactjs

问题描述

我的问题是这个。我有两个组成部分。第一个组件是图像裁剪器。第二个组件是我应该显示裁剪图像的组件。

My question is this. I have two components. First component is an image cropper. Second component is the one that i should display the cropped image.

我面临的问题是我可以将裁剪后的图像传递给我的第二个组件，但我必须按下裁剪图像并传递给第二个组件的按钮，两次。在第二次单击时，只有我的图像传递给第二个组件。但我只能通过一次单击在第一个组件中显示裁剪的图像。我认为这种情况正在发生，因为在反应状态下，状态变化不会立即发生。那我怎么能解决这个问题呢。

The problem i'm facing is i can pass the cropped image to my second component but i have to press the button that crops the image and pass to the second component, twice. On the second click only my image is passing to the second component. But i can display the cropped image in the first component only by one click. I think it is happening because in reactjs state changes are not occurring immediately. So how can i fix this.

我的方法是在第一个组件中创建 prop 函数 this.props.croppedImage（this.state.preview.img）; 此处 this.state.preview.img 是裁剪的图片。在第二个组件中，我通过调用prop函数获得裁剪后的图像。

My approach was to create a prop function in the 1st component as this.props.croppedImage(this.state.preview.img); here this.state.preview.img is the cropped image. And in the 2nd component i'm getting the cropped image by calling the prop function.

我的代码

第一个组件（裁剪器）

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;

第二个组件

这里我基本上做了以下几点。

Here i'm basically doing the following.

  <CropperTest  croppedImage = {this.getCroppedImg}/>

    getCroppedImg(img){

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

                previewImg:img

            })

        }

推荐答案

我认为这种情况正在发生，因为在reactjs状态变化不是立即发生。那么我该如何解决这个问题呢？

来自 React＃setState ，

setState（更新程序，[回调]）

setState（ ）将组件状态的更改排入队列。
setState 不会立即更新状态。 setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用 setState（）之后立即读取 this.state 潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调（setState（更新程序，回调））

setState() enqueues changes to the component state. The setState doesn't immediately update the state. setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.Instead, use componentDidUpdate or a setState callback (setState(updater, callback))

在 setState <中调用 this.props.croppedImage / code> callback.You将获得组件状态的更新值。在你的情况下，它的 this.state.preview

Call the this.props.croppedImage in the setState callback.You will get updated values of component state. In your case its this.state.preview

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

这篇关于在reactjs中发生状态改变后调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！