先前問題與解法

於昨日探討 React 避免太多的轉譯（Render）動作，因此改變 state 並不會馬上反應，會需要等到批次作業，因此需要取得另外處理。

第11天也有相同的問題，這次也一同解決吧！

改寫程式

把變數先從欄位中取中，然後再進行文字編譯，這時候不用 state 進行儲存與運用。

首先把 sourceStr 移除，因為已經不需要使用它了，在這邊的做法是先從欄位中取得資料，接著把這個值傳遞在每個功能中，不從原本定義的變數中取得。

let [uri, setUri] = useState(0);
let [asciiCode, setAsciiCode] = useState(0);

const handleChange = (e) => {
  const newStr = e.target.value;
  Change2Uri(newStr);
  Change2Ascii(newStr);
};

const Change2Uri = (source) => {
  setUri(encodeURIComponent(source));
};

const Change2Ascii = (source) => {
  let r = "";
  for (var i = 0; i < source.length; i++) {
    r += source.charCodeAt(i) + " ";
  }

  setAsciiCode(r);
};

其中，Change2Uri 和 Change2Ascii，都是用傳值的方式進入功能中計算，並且把用 useState 儲存。當欄位有變化的時候，在顯示的 label 就會一次的轉譯這些資訊。當取得正確資料，轉譯出來的也會是相同。完整的程式碼如下：

import { useState } from "react";

function StrCodeChange() {
  let [uri, setUri] = useState(0);
  let [asciiCode, setAsciiCode] = useState(0);

  const handleChange = (e) => {
    const newStr = e.target.value;
    Change2Uri(newStr);
    Change2Ascii(newStr);
  };

  const Change2Uri = (source) => {
    //encodeURI: 某些符號無法處理
    //encodeURIComponent: 比encodeURI 好
    setUri(encodeURIComponent(source));
    console.log("uri:" + uri);
  };

  const Change2Ascii = (source) => {
    let r = "";
    for (var i = 0; i < source.length; i++) {
      r += source.charCodeAt(i) + " ";
      console.log(r);
    }

    setAsciiCode(r);
    console.log("ASCII:" + asciiCode);
  };

  return (
    <div>
      <h1>編碼換算</h1>
      <div>
        <label>輸入字串：</label>
        <input itemType="text" onChange={handleChange}></input>
      </div>
      <div>
        <label>URI code:</label>
        <label>{uri}</label>
      </div>
      <div>
        <label>ASCII :</label>
        <label>{asciiCode}</label>
      </div>
    </div>
  );
}

export default StrCodeChange;

後記

一同把先前卡關的解決囉，剩下繼續把我們的小工具更為完整。讓我們繼續下去吧。