⭐任務說明

😸學習多次更新同一個狀態

更新同一個狀態

😸會一直更新同個狀態的就先想到計數器了，來簡單實作一下

• 這邊要做一個點一次 +3 的按鈕後，上面的數字一次就要以 3、6、9 這樣的方式以此類推的顯示

import { useState } from "react";
import "./styles.css";

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>React 大秘境 DAY 10</h1>
      <h2>{number}</h2>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}

• 我們的結果怎麼好像有點不對，說好的 +3 呢

發生什麼事？說好的更新呢

😸這邊我們要實現，在下一次畫面重新渲染前多次更新相同的狀態值時
需要以 setNumber(n => n + 1) 方式處理
那我們來改寫上面的範例

import { useState } from "react";
import "./styles.css";

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>React 大秘境 DAY 10</h1>
      <h2>{number}</h2>
      <button
        onClick={() => {
          setNumber(n => n + 1);
          setNumber(n => n + 1);
          setNumber(n => n + 1);
        }}
      >
        +3
      </button>
    </>
  );
}

• 看看結果如果，是不是變成每按一下就是 +3 ！
  

神奇的批次更新

• setNumber(n => n + 1); 是一個 function ，他會保留 n 的值並且會把 n 傳遞給下一組更新器使用
• 所以這邊的值會變成
  • 第一次 n 為 0，return 0 + 1 = 1
  • 第二次 n 為 1，return 1 + 1 = 2
  • 第三次 n 為 2，return 2 + 1 = 3
• 所以最終的 useState 為 3
• 在上一個範例程式碼中 useState(number + 1) ，因為 useState 的預設值通常會設定為 0 ，所都這邊的值會是 useState(0 + 1)

調整一下更新會發生什麼

• 我們改成先 setNumber(number + 7); 再來 setNumber(n => n + 1);
• 結果應該是…？

import { useState } from "react";
import "./styles.css";

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>React 大秘境 DAY 10</h1>
      <h2>{number}</h2>
      <button
        onClick={() => {
          setNumber(number + 7);
          setNumber(n => n + 1);         
        }}
      >
        +3
      </button>
    </>
  );
}

😸猜對了嗎？這邊的更新值就是一次變成 8

• setNumber(number + 7)：這邊的 number 本來為 0 ，所以是 0 + 7
• setNumber(n => n + 1)：當前的 n 為 7，所以 return 7 + 1 = 8

😸小知識，這邊的更新器命名方式，通常會使用狀態變數的第一個字母來命名

結語

• 今日學習如何使用 React 的批次更新，我們下個任務見！