在 React.js 中，考虑到 this.setState 在将其传递到另一个函数之前不会更新任何内容，我如何编写某些按钮的逻辑代码？

Question

我正在开发这个所谓的网页并以 table 形式排列了几个“图块”。当点击一个图块并且它是一个图像时，它应该被一个 <p> 元素替换，当一个图块被点击并且它是一个段落时，它应该被一个 <img> 元素替换].但是，没有两个图块可以同时显示 <p> 个元素。

    handleClickTile(e) {
        const newTarget = e.target

        // if (this.state.clickedTarget !== newTarget) {
            // const stateClickedTgt = tgt
        if(this.state.mode === 'p') {
            if(newTarget !== this.state.clickedTarget) {
                console.log("IS new target different from old? ")
                this.setState({ mode: 'image' })
                this.setState({ clickedTarget: newTarget})
            } else {
                this.setState({ mode: 'image' })
                this.setState({ clickedTarget: newTarget })
            }
        } 
        // else {
        //     this.setState({ mode: 'p', clickedTarget: newTarget })
        // }
        if(this.state.mode === 'image') {
            this.setState({ clickedTarget: newTarget, mode: 'p' })
            // this.setState()
        }

        // } 
        // else {
        //     console.log("THE ELSE -- this.state.clicked is not newtgt ")
        //     this.state.mode === 'image'
        //     ? this.setState({ mode: 'p', clickedTarget: newTarget }) 
        //     : this.setState({ mode: 'image', clickedTarget: newTarget })
        // }

    }

正如您从评论和混乱的代码中看出的那样，我曾多次尝试破解其中的逻辑，但还没有深入。我看到的问题是 this.setState() 仅在 handleClickTile() 结束后在渲染函数中使用后才更新任何内容。这会在“重置”图块时产生问题，因此不会有两个图块同时显示 <p> 元素。至少，单击时将磁贴重置为 <img> 是我采用的方法，我无法推测任何其他方法，这就是我寻求帮助的原因。

Answer 1

我会在您的组件 class 中实施 componentDidUpdate() 生命周期方法，以便在 handleClickTile().

中更新您的状态属性后将之前的状态与您当前的状态进行比较

当满足某些先前状态属性与其对应的当前状态属性不匹配的条件（即this.state.mode或this.state.clickedTarget）时，您可以更新其他状态属性，这将有效地“重置”您的瓷砖。

所以它看起来像：

componentDidUpdate(prevProps, prevState) {      
  if (prevState.mode !== this.state.mode) { // or replace mode with the appropriate state property to check for
    this.setState({ stateProp: newValue }) // change whatever state properties you need to reset the other tiles
  }  
}

这里有来自 the React documentation 的关于 componentDidUpdate() 的更多信息。

如果要在此生命周期方法中设置状态，请确保检查适当的状态属性是否与先前状态和当前状态不匹配，以避免无限循环（如前所述在文档中）。

在 React.js 中，考虑到 this.setState 在将其传递到另一个函数之前不会更新任何内容，我如何编写某些按钮的逻辑代码？

In React.js, how can I code the logic of aomw buttons considering that this.setState doesnt' update anything until it is passed into another function?

javascript

logic

reactjs