reactjs发生状态变化后调用函数答案

【问题标题】：Calling functions after state change occurs in reactjsreactjs发生状态变化后调用函数
【发布时间】：2018-02-10 01:44:46
【问题描述】：

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

我面临的问题是我可以将裁剪后的图像传递给我的第二个组件，但我必须按两次裁剪图像并传递给第二个组件的按钮。在第二次单击时，只有我的图像传递给第二个组件。但是我只能通过单击在第一个组件中显示裁剪的图像。我认为它正在发生，因为在 reactjs 状态更改不会立即发生。那么我该如何解决这个问题。

我的方法是在第一个组件中创建一个prop 函数，因为this.props.croppedImage(this.state.preview.img); 这里this.state.preview.img 是裁剪后的图像。在第二个组件中，我通过调用 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;

第二部分

这里我基本上是在做以下事情。

  <CropperTest  croppedImage = {this.getCroppedImg}/>

    getCroppedImg(img){

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

                previewImg:img

            })

        }

【问题讨论】：

setState 接受第二个参数作为状态更新时的回调函数。试试看！
另外，如果您像 method = () => {} 一样声明类方法，则无需预先绑定您的类方法
@ffxsam 谢谢，但这不是我问题的根源
是的。因此，为什么我发表评论而不是回答。

标签： javascript reactjs prop

【解决方案1】：

我认为它正在发生，因为在 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);
})

【讨论】：