在 React Hooks on Change 方法中更新 State

Question

我想知道為什么 React 在調用onChange方法后不更新 state。

簡介：一個簡單的輸入元素，帶有兩個要顯示的右浮動圖標。 如果輸入文本的長度為 0，則顯示一個圖標；如果輸入文本長度 > 0，則顯示另一個圖標。但在我在輸入元素中輸入第二個文本后，React 似乎正在更新 state。

我需要的是：

如果長度 == 0 則顯示%並且顯示X是長度 > 0。

如果長度 > 0，則用戶點擊X設置輸入文本 == "" 或 input.length = 0。

問題是：雖然我能夠清除輸入，但未顯示圖標% 。

  const onChange = (e: any) => {
    //setting user input
    if (userInput.length > 0)
      setDisplayIcon({ default: "d-none", clear: "d-block" });
    else setDisplayIcon({ default: "d-block", clear: "d-none" });
  };

  const clearText = (e: any) => {
    setUserInput("");
  };

  return (
   
            <label id="default" className={`${displayIcons.default}`}>
              %
            </label>
            <label className={`${displayIcons.clear}`} onClick={clearText}>
              X
            </label>
  );
}

Answer 1

添加設置顯示圖標 state：

const clearText = (e: any) => {
    setUserInput("");
    setDisplayIcon({ default: "d-block", clear: "d-none" });
};

Answer 2

您將無法在同一個 function 內使用 console.log 更新 state 值。嘗試將您的 console.log 放在 function 之外，您會發現它確實更新了。

“setState 是異步調用意味着如果同步調用被調用，它可能不會在正確的時間得到更新，比如在使用 setState 更新后知道 object 的當前值，它可能無法在控制台上給出當前更新值。要獲得一些同步行為需要通過function 而不是 object 到 setState。” - https://www.geeksforgeeks.org/reactjs-setstate/