Question

我有两个组件，用户可以在其中将图像或gif附加到帖子上。每当单击图像时，都会弹出一个模态，我想将数据传递回模态，以便显示单击的图像。

我制作了一个生命周期挂钩，以便可以检查是否正在发送道具，然后在子组件中设置状态，如下所示：

componentWillReceiveProps(){
if(this.props.modalImageData){
  this.setState({imageData: this.props.modalImageData})
 }
}

这很好，但是我在正确传递状态时遇到了问题。

我创建了一个处理程序，将点击的图像的图像数据传递到处理程序中，该处理程序为名为imageModalData的属性设置了状态，并将其传递给CreateGif组件：

 showModalSpeceficHandler = (event, image) =>{
    //console.log(event.target.value);
    console.log('image data is ' + image)
    this.setState({imageModalData: image})
    console.log('modal image data is ' + 
    this.state.imageModalData)
    this.showModalHandler()
}

在这里，当我第一次控制台记录图像时（传递到函数中），我遇到了问题，这是正确的，但是之后，当我控制台记录状态时，imageModalData会显示随机图片。

然后，将随机图片传回子组件，这是不希望的，由于状态不正确，我在做什么错

Modal show={this.state.showModal} modalClosed={this.showModalHandler}>
                <CreateGif onSelectUrl={this.addedImageHandler} onSelectFile={this.addFileDataHandler} modalImageData={this.state.imageModalData}/* this is where the data is passed back down */  />

Answer 1

看看docs for setState：

将setState（）视为请求而不是立即命令来更新组件。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不能保证状态更改会立即应用。

如果您需要确保在触发某些操作（例如呈现模态）之前已应用更新，则可以使用setState(updater, callback)表单：

this.setState(
  // updater function, returning a state update
  state => ({imageModalData: image}),
  // callback function, executed after update is applied
  () => this.showModalHandler()
);

设置状态未正确执行。

1 个答案: