Question

我的ReactJs项目中有一个模型组件，其中有一张图片，正在显示，我想传递图片数据，用户单击该图片的数据，它既不能是原始数据，也不能是URL。

我已经制作了一个手柄，可以删除图片（如果使用Ctrl键按下），或者只要正常单击就可以打开模态

showModalSpeceficHandler = (event, image) =>{
    let index = this.state.images.indexOf(image)
    if(event.ctrlKey){
        let temp = this.state.images.slice(); //makes a shallow copy of the array
        temp.splice(index, 1); //remove item
        this.setState(prevState => ({ images: temp }));
    }else{
        console.log(image); // logs the data of the clicked image
        this.setState(
            state => ({imageModalData: image}),
            () => this.showModalHandler()
        );
        console.log(this.state.imageModalData) //logs the data of the last added image
    }
}

因此，现在的问题如注释中所述，状态设置不正确。我怀疑showModalHandler会改变状态，但

它只是设置状态（如果不显示）：

 showModalHandler = () =>{
    this.setState({showModal: !this.state.showModal})
}

由于未正确设置状态，正在发生什么或覆盖状态

Answer 1

setState是异步操作。

当您的setState调用需要引用旧状态时，您应该使用替代的setState签名，在该签名中您将函数作为第一个参数传递给

setState((state) => ({ showModal: !state.showModal }));

请参见https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

从技术上讲，这不是回调。 callback参数是 second setState参数，该参数很少使用（因此，或多或少应该永远不要使用它）。参见https://reactjs.org/docs/react-component.html#setstate

Answer 2

尝试将您的showModalHandler函数绑定到您的构造函数中，如下所示：

constructor(props){
   super(props)
   /* your state*/
   this.showModalHandler = this.showModalHandler.bind(this)
}

状态未正确设置

2 个答案: