React TodoList中useState状态无法持久化问题求助

一、解决提交后任务短暂显示即消失的问题 #

问题根源是表单默认提交行为会触发页面刷新，导致组件重新渲染、状态重置。只需在提交函数中阻止默认行为即可：

修改addTodo函数，接收事件参数并调用preventDefault()：

function addTodo(e) {
  e.preventDefault(); // 阻止表单默认刷新行为
  if (!text1.trim()) return; // 空内容不添加
  setDoes([...does, text1]);
  setText1(''); // 清空输入框
}

二、实现任务持久化存储 #

useState的状态仅存于内存，页面刷新后会丢失。我们可以借助localStorage实现本地持久化，步骤如下：

1. 初始化does状态时，从localStorage读取已保存的任务（如果有）
2. 每次更新does状态后，同步将新的任务列表保存到localStorage

修改后的完整代码：

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [text1, setText1] = useState('');
  // 从localStorage读取初始值，没有则为空数组
  const [does, setDoes] = useState(() => {
    const savedTodos = localStorage.getItem('todos');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });

  // 监听does变化，同步保存到localStorage
  useEffect(() => {
    localStorage.setItem('todos', JSON.stringify(does));
  }, [does]);

  function addTodo(e) {
    e.preventDefault();
    if (!text1.trim()) return;
    setDoes(prevTodos => [...prevTodos, text1]); // 使用函数式更新避免状态依赖问题
    setText1('');
  }

  return (
    <div>
      <h1>To do List!</h1>
      <form onSubmit={addTodo}>
        <input 
          type="text" 
          name='text1' 
          id='text1' 
          placeholder='To do' 
          value={text1} // 绑定value实现受控组件
          onChange={(e) => setText1(e.target.value)}
        />
        <button type="submit" className="submitButton">Add</button>
      </form>
      
      <ul className='todoo'>
        {does.map((item, index) => (
          <li key={index}>{item}</li> // 若任务可能重复，用index或唯一ID做key更稳妥
        ))}
      </ul>
    </div>
  );
}

export default App;

关键修改说明： #

• 用useState的函数式初始化读取localStorage，避免每次渲染都执行读取操作
• 添加useEffect监听does变化，自动同步到localStorage
• 将输入框改为受控组件（绑定value），确保输入状态与text1完全同步
• 使用函数式更新setDoes，避免因闭包导致的状态更新异常
• 增加空内容判断，防止添加空任务

内容的提问来源于stack exchange，提问作者André Dettmer