如何在 setState 中停止递减到减号

Question

counter 是一个组件，我在其中放置了一个递减按钮我希望如果该值为零，它将停止变为负值我已经设置了this.setState({counters : counters === 0 ? counters : 0 })但是它没有工作它的给出错误

这是我的代码

class Counters extends Component {
    state={
        counters:[
            {id:1, value:0},
            {id:2, value:0},
            {id:3, value:0},
            {id:4, value:0}
        ],
       

    }
    handleIncrement=counter=>{
        const counters =[...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index]={...counter}
        counters[index].value++;
        this.setState({counters})
    }
    handleDecrement=counter=>{
        const counters =[...this.state.counters];
        const index = counters.indexOf(counter);
        counters[index]={...counter}
        counters[index].value--;

        this.setState({counters : counters === 0 ? counters : 0 })
    }
    handleDelete=(counterid)=>{
      const counters = this.state.counters.filter(m=>m.id !== counterid)
      this.setState({counters})
    }
    handleReset=()=>{
        const counters = this.state.counters.map(m=>{ 
            m.value = 0;
             return m
        })
        this.setState({counters})

    }
    
    render() {
        
        return (
            <div>
                <h1>{this.state.counters.reduce((a,b)=>({value:a.value+b.value})).value}</h1>
                <button onClick={this.handleReset} className="btn btn-secondary btn-sm">RESET</button>
           {this.state.counters.map(m=>
           <Counter key={m.id} 
             id={m.id} getDelete={this.handleDelete}
              onIncrement={this.handleIncrement}
              onDecrement={this.handleDecrement}
              counter={m}
              >
           
              
           </Counter>) }


            </div>

        );
    }
}

这是结果

Answer 1

改变

counters[index].value--;
this.setState({counters : counters === 0 ? counters : 0 });

到

counters[index].value = Math.max(counters[index].value - 1, 0);
this.setState({ counters });

Answer 2

您的问题是setState()不是同步的。

解决方案是使用回调语法而不是对象语法

handleDecrement = counter => {
    this.setState(oldstate => ({
        counters: oldstate.counters.map(item => {
            if (item.id != counter.id) return item;
            return {
                id: item.id, 
                value: (item.value > 0) ? (item.value -1) : 0
            };
        })
    }))
}

https://en.reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous