为啥我的状态计数器比它应该的值落后一个值？

Posted 2023-02-22

【中文标题】为啥我的状态计数器比它应该的值落后一个值？

【英文标题】：Why is my state counter one value behind what it should be?为什么我的状态计数器比它应该的值落后一个值？

【发布时间】：2019-12-14 08:23:53

【问题描述】：

我是 reactjs 新手。我试图为一些上传的文件创建一个评论部分，并在每个文件的评论按钮上保留一个计数器。但是，计数器返回奇怪的值。 以下是相关代码：

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 内部的控制台日志都为this.state.clickCounter 返回值0。我预计第一个为 0，但到此阶段第二个 console.log 为 1。

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

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

谁能帮我弄清楚发生了什么事？

【参考方案1】：

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

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

... 表示“调用console.log，然后将其结果与counterMat: temp 一起传递给this.setState”。你可能打算这样做：

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

【讨论】：

感谢您的帮助。我已经按照你说的修改了。我还意识到我需要将//update click counter this.setState(clickCounter:this.state.clickCounter + 1, this.updateCounterMatrix()) 更改为//update click counter this.setState(clickCounter:this.state.clickCounter + 1, ()=>this.updateCounterMatrix()) 才能完全解决问题。但是，我在第一次渲染时仍然得到未定义的值

您有时使用this.counterMat，有时使用this.state.counterMat。 createCountermat 中的日志使用this.counterMat，但在单击发生之前不会设置该变量。如果无意中使用了两个变量，则将代码更新为只使用一个。如果是故意的，那么给this.counterMat一个初始值，可能在构造函数中。