3 回答

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊
問題setCounter(counter + value || 1);
在于 JS 會(huì)先嘗試計(jì)算,counter + value
然后再進(jìn)行布爾測(cè)試。因此,例如,如果您的counter
值為1
并且減去 的值1
,則結(jié)果為0
,這是錯(cuò)誤的,因此1
將保存為 的新值counter
。這可能不是你想要的。
console.log(100 + undefined || 1); // expect 101 but result is 1 console.log(1 + -1 || 1); // expect 0 but result is 1
不過,您可以對(duì)優(yōu)先級(jí)進(jìn)行分組,即counter + (value || 1)
.
console.log(100 + (undefined || 1)); // 101
如果您只是想提供默認(rèn)值 1 ,value那么您可以在簽名中執(zhí)行此操作。如果value未定義,它將被分配 的值1。并使用功能狀態(tài)更新。
const handleCounterChange = (action, value = 1) => {
switch (action) {
case "+":
setCounter(counter => counter + value);
break;
case "-":
setCounter(counter => counter - value);
break;
default:
setCounter(counter => counter + value);
break;
}
};
關(guān)于這種“reducer”類型模式的一個(gè)側(cè)面說明是,如果該操作不是您專門處理的操作,則返回現(xiàn)有狀態(tài)。
const handleCounterChange = (action, value = 1) => {
switch (action) {
case "+":
setCounter(counter => counter + value);
break;
case "-":
setCounter(counter => counter - value);
break;
default:
// ignore, i.e. don't update state at all
break;
}
};

TA貢獻(xiàn)1884條經(jīng)驗(yàn) 獲得超4個(gè)贊
這里提出了幾個(gè)優(yōu)秀的重構(gòu)。我肯定想通讀這些建議并進(jìn)行重構(gòu)。
至于您不可預(yù)測(cè)的計(jì)數(shù)器的原因,假設(shè)單擊參數(shù)正在進(jìn)入您的狀態(tài)更新函數(shù),則存在操作順序問題??紤]這種情況。
值為undefined
從上面代碼的編寫方式來看,當(dāng) value 為 時(shí)undefined,我們希望value在 state 中添加一個(gè)數(shù)字counter。由于操作順序,這不是正在發(fā)生的事情。這個(gè)錯(cuò)誤隱藏在明顯的視線中,因?yàn)榻?jīng)常value和counter兩者都是1,所以看起來狀態(tài)沒有改變。
> let value = undefined
undefined
> let counter = 1
undefined
> counter + value || 100
100
最后一條語句說“將計(jì)數(shù)器加起來undefined”,這NaN也是錯(cuò)誤的。在這種情況下,結(jié)果將始終是“或”語句的另一端100。
使用括號(hào)更改操作順序,并創(chuàng)建所需的行為。
> counter + (value || 100)
101

TA貢獻(xiàn)1886條經(jīng)驗(yàn) 獲得超2個(gè)贊
本身不是一個(gè)答案,但不要使用額外的不必要的功能使您的代碼過于復(fù)雜。您的邏輯是如此簡(jiǎn)單,添加額外的功能會(huì)使閱讀變得更加復(fù)雜并添加奇怪的邏輯(默認(rèn)值是什么?)
return (
<div className={classes.Counter}>
<CounterOutput value={counter} />
<CounterControl
label="+"
clicked={() => setCounter(state => state+1)}
/>
<CounterControl
label="-"
clicked={() => setCounter(state => state-1)}
/>
<CounterControl
label="+ 5"
clicked={() => setCounter(state => state+5)}
/>
<CounterControl
label="- 5"
clicked={() => setCounter(state => state-5)}
/>
</div>
);
如果你想再干一點(diǎn),你總是可以做這樣的事情:
const change = by => () => setCounter(count => count+by)
return (
<div className={classes.Counter}>
<CounterOutput value={counter} />
<CounterControl
label="+"
clicked={change(1)}
/>
<CounterControl
label="-"
clicked={change(-1)}
/>
<CounterControl
label="+ 5"
clicked={change(5)}
/>
<CounterControl
label="- 5"
clicked={change(-5)}
/>
</div>
);
添加回答
舉報(bào)