先前遇到的問題

在第10天發現取到的值都是之前的值，對此完全不知道發生什麼事情。經過網友的回應，原來是在 batch update 發生的問題。原來 React 避免過度的轉譯（Render），所以就在設定值的時候，並不會馬上地進行變化，而是會將所有的改變 state 收集起來，然後一次做修改。

因此在這邊，使用兩個方法放值，一個是用變數取直，另一個是用 setState 放值。因此第一種 newCelsius 可以讀取現在的值，而使用 setState 則是會取得上一個值。

用這個當範例：

const newCelsius = e.target.value;
setCelsius(newCelsius);
console.log("e:" + newCelsius + "|f:" + fahrenheit);
console.log("e:" + celsius + "|f:" + fahrenheit);

在輸入 10 到 100 的過程中，會取得之前的值，所以導致華氏溫度沒有變化，提供錯誤的訊息：

e:10|f:50
e:100|f:50

用變數進行計算

這樣的話，就用變數接值，用此來計算，這樣資料就會是正確的。當然，兩個輸入欄的 handle 功能都要處理，這樣問題就解決囉～

import { useState } from "react";

function DegreeChange() {
  let [celsius, setCelsius] = useState(0);
  let [fahrenheit, setFahrenheit] = useState(0);

  const handleCelsiusChange = (e) => {
    const newCelsius = e.target.value;
    setCelsius(newCelsius);
    setFahrenheit((9.0 / 5.0) * newCelsius + 32);
    console.log("e:" + newCelsius + "|f:" + fahrenheit);
  };

  const handleFahrenheitChange = (e) => {
    const newFahrenheit = e.target.value;
    setFahrenheit(newFahrenheit);
    setCelsius((5.0 / 9.0) * (newFahrenheit - 32));
    console.log("e:" + newFahrenheit + "|c:" + celsius);
  };

  return (
    <div>
      <h1>溫度換算</h1>
      <div>
        <label>攝氏溫度（°C ）</label>
        <div>
          <input itemType="text" onChange={handleCelsiusChange}></input>
        </div>
      </div>
      <div>
        <label>華氏溫度（°F ）</label>
        <div>
          <input itemType="text" onChange={handleFahrenheitChange}></input>
        </div>
      </div>
      <div>
        <label>
          {celsius}°C ={fahrenheit} °F
        </label>
      </div>
    </div>
  );
}

export default DegreeChange;

參考資料

• React 的 batch update 策略，包含 React 18 和 hooks

後記

感謝 Tree 的協助，讓我找到原因囉！卡關好幾天的說。