Reactjs 如何在setState中停止减量到负数

计数器是一个组件，我在它的面板中放置了一个减量按钮，我希望如果值为零，它将停止转到我设置的负值

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>

        );
    }
}

类计数器扩展组件{
陈述={
计数器：[
{id:1，值：0}，
{id:2，值：0}，
{id:3，值：0}，
{id:4，值：0}
],
}
handleIncrement=计数器=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}
计数器[索引]。值++；
this.setState（{counters}）
}
handleDecrement=计数器=>{
常量计数器=[…this.state.counters]；
const index=计数器。indexOf（计数器）；
计数器[索引]={…计数器}
计数器[索引]。值--；
this.setState（{counters:counters==0？counters:0}）
}
handleDelete=（计数器ID）=>{
const counters=this.state.counters.filter（m=>m.id！==counterid）
this.setState（{counters}）
}
handleReset=（）=>{
const counters=this.state.counters.map（m=>{
m、 数值=0；
返回m
})
this.setState（{counters}）
}
render（）{
返回(
{this.state.counters.reduce（（a，b）=>（{value:a.value+b.value}））.value}
重置
{this.state.counters.map（m=>
) }
);
}
}

这就是结果 改变

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

到

改变

到

---

您的问题是

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
            };
        })
    }))
}

---

您的问题是

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
            };
        })
    }))
}

---

计数器

是一个数组，为什么要将其与

0

进行比较？这将永远是错误的，它调用this.setState（{counters:0}），而

0

是一个数字，它没有

reduce（）

方法。我想停止使用负递减。你的意思是这样的。setState（{counters:counters.length==0？[]：counters}）@MBB不，我想他们没有。。。这没有任何意义，我的意思是，当我在零后单击减量按钮时，它变为负-1-2-3，我想在零处停止

计数器

是一个数组，为什么要将它与

0

进行比较？这将永远是错误的，它调用this.setState（{counters:0}），而

0

是一个数字，它没有

reduce（）

方法。我想停止使用负递减。你的意思是这样的。setState（{counters:counters.length==0？[]：counters}）@MBB不，我想他们没有。。。这没有任何意义，我的意思是，当我在零后单击减量按钮时，它变为负-1-2-3，我想在零处停止为什么我们要传递oldstate参数，你能解释一下吗？setState（{counters:（oldstate.counters>0）？（oldstate.counters-1）：0}）为什么不使用它，就像这个setState是异步的一样。因此，在读取状态变量值（此处为

计数器）的时间和更新值的时间之间，该变量可以更改值。因此，如果您有
计数器=3
，并且减量非常快，那么setState将设置
计数器=2
三次，最终值将是
2
而不是
0
。使用函数语法setState将使用最新的值，因此设置为
counters=2
然后
counters=1
然后
counters=0
oldstate不是函数为什么u作为参数传递
oldstate=>（）
是函数的箭头语法，您可以编写它
function（oldstate）{}
如果您愿意，但无论哪种方式，它都是一个函数为什么我们要传递oldstate参数您能解释一下这个.setState（{counters:（oldstate.counters>0）？（oldstate.counters-1）：0}）为什么不使用它，就像这个setState是异步的一样。因此，在读取状态变量值（此处为
计数器）的时间和更新值的时间之间，该变量可以更改值。因此，如果您有
计数器=3
，并且减量非常快，那么setState将设置
计数器=2
三次，最终值将是
2
而不是
0
。使用函数语法setState将使用最新的值，因此设置为
counters=2
然后
counters=1
然后
counters=0
oldstate不是函数为什么u作为参数传递
oldstate=>（）
是函数的箭头语法，您可以编写它
function（oldstate）{}
如果您愿意，但无论哪种方式，它都是一个函数