React输入框state无法更新且报setSavedinput未定义错误如何解决？

错误原因 #

• 作用域不匹配：你将useState相关声明写在了独立的blankinput函数内部，setsavedContent和savedContent都属于该函数的局部变量，外部定义的onChangeHandler和App组件无法访问，触发未定义报错。
• state更新异步特性：React中useState的更新方法是异步执行的，调用更新方法后立刻读取state，拿到的会是更新前的旧值，无法获得刚输入的内容。
• 补充：如果你的报错信息明确提示setSavedinput未定义，还要检查变量命名的拼写、大小写是否和声明时完全一致。

修正后代码 #

import "./styles.css";
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

export default function App() {
  // 将state声明放在App组件作用域内，组件内方法可正常访问
  const [savedContent, setSavedContent] = useState("");

  const onChangeHandler = (e) => {
    const inputValue = e.target.value;
    setSavedContent(inputValue);
    // 直接读取输入的新值打印，避开异步更新问题
    console.log("当前输入值：", inputValue);
  };

  // 若需要在state更新完成后执行逻辑，可加useEffect监听
  useEffect(() => {
    console.log("state已更新，最新值：", savedContent);
  }, [savedContent]);

  return (
    <div className="App">
      <input type="text" onChange={onChangeHandler} />
    </div>
  );
}

核心修改点 #

1. 移除了无实际作用的blankinput函数，把state声明放在App组件内部，保证作用域可访问
2. 将onChangeHandler移入App组件内部，可正常调用state更新方法
3. 提供两种获取最新值的方案：输入时直接读取事件对象的value值，或者用useEffect监听state变化后读取

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