如何实现页面重载读取localStorage并修复React笔记功能异常？

问题根源 #

两处异常的核心原因是textarea的value绑定错误：

• textarea绑定的是每次组件渲染直接从localStorage读取的固定值，而非响应式state变量text
• 状态更新后视图无法跟随响应，因此出现输入无变化、清空不生效的问题

修复方案 #

调整逻辑如下：

1. 给useState设置初始值为localStorage读取的内容，满足页面重载自动读取已有数据的需求
2. 将textarea的value绑定到state变量text，保证输入、清空操作的响应式更新
3. 原有保存、清空的逻辑仅需要配合绑定调整即可正常运行

修复后的完整代码：

import { useState } from "react";
import "./App.css";

function App() {
  const storage = window.localStorage;
  // 初始值直接从localStorage读取，页面重载自动加载已存数据
  const [text, setText] = useState(storage.getItem('text') || '');

  return (
    <div className="App">
      <div className="box">
        <div className="field">
          <div className="control">
            <textarea
              className="textarea is-large"
              placeholder="Notes..."
              // 绑定响应式state而非直接读localStorage
              value={text}
              onChange={(e) => setText(e.target.value)} />
          </div>
        </div>
        <button
          className="button is-large is-primary is-active"
          onClick={() => storage.setItem('text', text)}>Save</button>
        <button
          className="button is-large"
          onClick={() => {
            storage.removeItem('text');
            // 清空state直接触发textarea内容更新，无需刷新
            setText('');
          }}>Clear</button>
      </div>
    </div>
  );
}

export default App;

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