React中onInput事件触发后div展示的hashedText变量不更新如何解决

问题原因 #

你声明的hashedText是普通JavaScript局部变量，React 仅会在state或props发生变化时触发组件重渲染更新视图，修改普通变量既不会触发重渲染，而且每次组件重渲染时这个变量都会被重置为空字符串，自然无法展示最新的哈希计算结果。

最优解决思路 #

你已经存了输入文本的text state，完全不需要额外声明变量存储哈希结果，直接在渲染时调用hash函数传入text计算即可，每次输入更新text都会触发组件重渲染，自动计算最新的哈希值展示。

修改后的完整代码如下：

import React from "react";
import { useState } from "react";

const TextInput = () => {
  const [text, setText] = useState("");
  // 哈希计算函数
  const hash = (string) => {
    console.log("you made it");
    var hash = 0;
    if (string.length === 0) return hash;
    for (let i = 0; i < string.length; i++) {
      let ch = string.charCodeAt(i);
      hash = (hash << 5) - hash + ch;
      hash = hash & hash;
    }
    return hash;
  };

  return (
    <div className="form-control">
      <h1>哈希计算器</h1>
      <label>输入文本</label>
      <input
        onInput={(e) => setText(e.target.value)}
        type="text"
        placeholder="请输入内容"
      />
      <label>哈希结果</label>
      <div>{hash(text)}</div>
    </div>
  );
};

export default TextInput;

备选方案（如需单独存储哈希值） #

如果你的业务场景需要单独存储哈希结果，可以将hashedText也声明为React state：

1. 替换原来的let hashedText = ""为const [hashedText, setHashedText] = useState("")
2. 在输入更新的回调中同时更新哈希state：

const getInput = (string) => {
  setText(string);
  setHashedText(hash(string));
};

内容的提问来源于stack exchange，提问作者Toky10