在更改方法上更新 React Hooks 中的状态答案

【问题标题】：Update State in React Hooks on Change method在更改方法上更新 React Hooks 中的状态
【发布时间】：2022-12-12 05:30:28
【问题描述】：

我想知道为什么 React 在调用方法 onChange 后不更新状态。

概括：一个简单的输入元素，带有两个要显示的右浮动图标。如果输入文本的长度为 0，则显示一个图标；如果输入文本长度 > 0，则显示另一个图标。但在我在输入元素中输入第二个文本后，React 似乎正在更新状态。

我需要的是：

如果长度 == 0 则显示 %，如果长度 > 0 则显示 X。

如果长度 > 0，则用户点击 X 设置输入文本 == "" 或 input.length = 0。

问题是：虽然我能够清除输入，但未显示图标 %。

export default function App() {
  const [userInput, setUserInput] = useState("");
  const [displayIcons, setDisplayIcon] = useState({
    default: "d-block",
    clear: "d-none"
  });

  const onChange = (e: any) => {
    const _userInput = e.currentTarget.value;
    setUserInput(_userInput);
    console.log("_userInput", _userInput.length);
    console.log("userInput", userInput.length);
    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 (
    <Row>
      <Col>
        <div className="input-group position-relative">
          <div className="form-control">
            <label id="default" className={`${displayIcons.default}`}>
              %
            </label>
            <label className={`${displayIcons.clear}`} onClick={clearText}>
              X
            </label>
            <Input
              type="text"
              className="custom-input"
              placeholder="Enter Something"
              onChange={onChange}
              value={userInput}
            />
          </div>
        </div>
      </Col>
    </Row>
  );
}

【问题讨论】：

你应该使用useCallback。
@morganney 在clearText 和onChange 上都使用CallBack ??

标签： javascript reactjs typescript react-hooks

【解决方案1】：

添加设置显示图标状态：

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

【讨论】：

哦，太好了，那奏效了！

【解决方案2】：

您将无法在同一函数内 console.log 更新状态值。尝试将您的 console.log 放在该函数之外，您会发现它确实会更新。

“setState 是异步调用意味着如果同步调用被调用它可能不会在正确的时间得到更新就像使用 setState 更新后知道对象的当前值它可能不会在控制台上给出当前更新值。要获得一些同步行为需要通过函数而不是对象到 setState。” - https://www.geeksforgeeks.org/reactjs-setstate/

【讨论】：