为什么我的状态计数器比它应该的值少一个值？

Question

我是 reactjs 的新手。我正在尝试为一些上传的文件创建一个评论部分，并在附加到每个文件的评论按钮上保留一个计数器。但是，计数器是 returning 奇怪的值。这是相关代码：

class ListItem extends React.Component {


        constructor(props){
            super(props)
            this.clicked = false 
            this.commentButtonRef = React.createRef();
            this.state = {clickCounter:0, counterMat:[]} 
        }




         handleClick = () =>{


                console.log(this.state.clickCounter) 
                this.clicked = true;
                this.counterMat = []
                this.props.onCommentButtonClick(this.props.file, this.clicked)
                this.clicked = false;

            //update click counter
            this.setState({clickCounter:this.state.clickCounter + 1}, this.updateCounterMatrix())

        }

        updateCounterMatrix = ()=> {

                const temp = this.state.counterMat.slice() //copy the array
                temp[1] = this.state.clickCounter //execute the manipulations
                this.setState({counterMat: temp},console.log(this.state.counterMat, this.state.clickCounter))
            }

        createCounterMat=(element)=>{
            // use ref callback to pass DOM element into setState
            this.setState({counterMat:[element,this.state.clickCounter]}) 
            console.log(this.counterMat) 
        }

        render(){

            return( 

                <div className="item">
                        <i className="large file alternate icon"></i>
                        <div className="content">
                                <div className="header">{this.props.file}</div>
                                <button className='comment-button' 
                                        id = {this.props.file} 
                                        onClick = {this.handleClick} 
                                        key = {this.props.file}
                                        ref = {this.createCounterMat}
                                        clickcounter = {this.state.clickCounter}
                                > Comment</button> 
                        </div>
                </div>
            )
        }
}

以下是我遇到的问题：

1) 一旦此页面首次呈现，我在 button 元素中使用 reactRef 回调函数 createCounterMat 应该控制台日志未定义，这是意外的。

2) 第一次单击我的按钮时，handleClick 函数会正确调用。但是，handleClick 和 updateCounterMatrix 中的控制台日志都 return this.state.clickCounter 的值为 0。我预计第一个为 0，但第二个 console.log 在这个阶段为 1。

3) 第二次单击时，clickCounter 状态似乎正确地递增 1。但是，console.log(this.state.counterMat, this.state.clickCounter) 在 this.state.counterMat 中给出的值为 0，而值为1 在简单 this.state.clickCounter 的情况下。

这是显示所有这些的屏幕截图

谁能帮我弄清楚这是怎么回事？

Answer 1

您是在设置状态之前而不是之后调用 console.log。这个：

 this.setState(
  {counterMat: temp},
  console.log(this.state.counterMat, this.state.clickCounter)
)

... 表示 "call console.log, then pass its result along with {counterMat: temp} into this.setState"。您可能打算这样做：

 this.setState(
  {counterMat: temp},
  () => console.log(this.state.counterMat, this.state.clickCounter)
)

为什么我的状态计数器比它应该的值少一个值？

Why is my state counter one value behind what it should be?

javascript

state

class

setstate

reactjs