在 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/