Question

我尝试通过单击按钮来更改存储在变量中的数字，但是当我第一次单击按钮时，它不会更改变量的值，但第二个变量的值。我以1为增量更改数字，因此当我点击按钮currentNumber += 1时，我会在其后面运行console.log以查看它是否发生变化。第一次单击它时，它会打印出默认值，第二次单击它就是它实际发生变化时，它会搞乱我代码的预期功能。我为此使用了React。

＆＃13;

constructor(props) {
	    super(props);
        this.state = {
            currentSize: parseInt(this.props.size),
            min: 4,
            max: 40,
        }
    };
    
    
increaseSize(){
        this.setState({currentSize: this.state.currentSize + 1}, function(){
            if(this.state.currentSize >= this.state.max){
                this.state.currentSize = this.state.max;
                this.state.isRed = true;
            } else if(this.state.currentSize < this.state.max){
                this.state.isRed = false;
            }
        });
        console.log(this.state.currentSize);
    };
    
render() {
        var isBold = this.state.bold ? 'normal' : 'bold';
        var currentSize = this.state.currentSize;
        var textColor = this.state.isRed ? 'red' : 'black';

        return(
               <div>
               <button id="decreaseButton" hidden='true' onClick={this.decreaseSize.bind(this)}>-</button>
               <span id="fontSizeSpan" hidden='true' style={{color: textColor}}>{currentSize}</span>
               <button id="increaseButton" hidden='true' onClick={this.increaseSize.bind(this)}>+</button>
               <span id="textSpan" style={{fontWeight: isBold, fontSize: currentSize}} onClick={this.showElements.bind(this)}>{this.props.text}</span>
               </div>
        );
    }

＆＃13;

然后显示变量中的数字，但显示的数字与变量内的数字不同

如图所示，显示的数字为26，但变量为25。

此外，您可以看到我为计数器设置了最小值和最大值。当它达到任一值时，它会在显示屏中进一步显示，但不会在控制台中显示。因此在显示屏中它停在3和41但在控制台中停在4和40。

我做错了什么？

编辑：默认值为16，并且在我第一次点击按钮时打印到控制台，这就是它无法正常工作的原因。

Answer 1

使用setState()的功能版本来获取prev状态值 - 因为React异步处理状态更改，在设置它们时无法保证它们的值;这也是您使用console.log的原因。取而代之的是：

increaseSize(){
const aboveMax = this.state.currentSize >= this.state.max;

this.setState( prevState => ({
    currentSize: aboveMax ? prevState.max : prevState.currentSize + 1,
    isRed: aboveMax
})
, () => console.log(this.state.currentSize) );
};

或者，如果您不想使用render()回调函数，请将控制台语句移至setState()方法。

请参阅https://reactjs.org/docs/react-component.html#setstate

不要忘记在构造函数中设置isRed：）

使用React更改数字的功能无法正常工作

1 个答案: