第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

傳遞值的反應(yīng)鉤子問題|| defaultValue 和更新計(jì)數(shù)器

傳遞值的反應(yīng)鉤子問題|| defaultValue 和更新計(jì)數(shù)器

忽然笑 2022-10-21 10:19:16
在下面找到示例代碼和屏幕截圖。兩個(gè)問題:counter沒有正確更新,是否允許寫類似的東西setCounter((prev) => { return { counter: prev.counter - value || 1 }});?setCounter(counter + value || 1)什么是正確的工作方式,在缺少實(shí)際值的情況下使用 1 ?在下面找到示例代碼和屏幕截圖。const Counter = (props) => {  const [counter, setCounter] = useState(0);  const handleCounterChange = (action, value) => {    switch (action) {      case "+":        setCounter(counter + value || 1);        break;      case "-":        setCounter(counter - value || 1);        break;      default:        setCounter(counter + value || 1);        break;    }  };  return (    <div className={classes.Counter}>      <CounterOutput value={counter} />      <CounterControl        label="+"        clicked={() => handleCounterChange("+")}      />      <CounterControl        label="-"        clicked={() => handleCounterChange("-")}      />      <CounterControl        label="+ 5"        clicked={() => handleCounterChange("+", 5)}      />      <CounterControl        label="- 5"        clicked={() => handleCounterChange("-", 5)}      />    </div>  );};export default Counter;
查看完整描述

3 回答

?
Qyouu

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;

  }

};


查看完整回答
反對(duì) 回復(fù) 2022-10-21
?
慕村9548890

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


查看完整回答
反對(duì) 回復(fù) 2022-10-21
?
MM們

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>

  );


查看完整回答
反對(duì) 回復(fù) 2022-10-21
  • 3 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)