Question

我在一个函数中两次检查我的一个键的状态。但是，即使对键值进行操作后，它仍然报告相同的值。

所以我有一个名为 clickMe 的函数，该函数将从 onClick 事件运行，用于返回组件的按钮。当它被点击时，函数应该在执行操作之前检查以查看 totalRemaining 的当前状态。如果 totalRemaining 大于 0，它应该增加点击次数并减少 totalRemaining。在该操作之后，它应该检查totalRemaining 是否仍然大于0。如果不是，它应该禁用该按钮。但是，操作前后totalRemaining的值是一样的，虽然渲染后很明显已经更新了。

import React from 'react';


class Item extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            clicks: 0,
            totalRemaining: 10,
            disabled: false,

        }
    }

    clickMe(){
        if(this.state.totalRemaining>0){
            console.log(`Clicks: ${this.state.clicks}`)
            console.log(`Total Remaining: ${this.state.totalRemaining}`)

            this.setState({
                clicks: this.state.clicks + 1,
                totalRemaining: this.state.totalRemaining - 1
            });
            console.log(`Clicks: ${this.state.clicks}`)
            console.log(`Total Remaining: ${this.state.totalRemaining}`)            
            if(this.state.totalRemaining===1){
                this.setState({
                    disabled: true
                })
            }
        }else{
            this.setState({
                disabled: true
            })
        }        
    }

    render() {
        return(
            <div>
                <button onClick={() => this.clickMe()} disabled={this.state.disabled}>Click Me {this.props.name}</button>
                <input placeholder={this.state.totalRemaining}/>
                <input placeholder={this.state.clicks}/>
            </div>
            
        )
    }
}

export default Item;

这是控制台输出：

this.state.totalRemaining
10
MyItem.js:18 Clicks: 0
MyItem.js:19 Total Remaining: 10
this.state.totalRemaining
10
this.state.totalRemaining
10
MyItem.js:25 Clicks: 0
MyItem.js:26 Total Remaining: 10

Answer 1

  this.setState({
                clicks: this.state.clicks + 1,
                totalRemaining: this.state.totalRemaining - 1
            },() => {this.state.totalRemaining < 1 ?  this.setState({
                disabled: true
            }) : null});

参考：https://stackoverflow.com/a/54713679/11229002

React 是否等待渲染更新状态？

1 个答案: