React项目中基于localStorage实现任务按钮持久化与删除功能求助

问题根源 #

你的代码目前仅将输入框的临时值存入localStorage，未对任务列表做持久化存储，同时缺失任务渲染与删除逻辑，导致刷新后任务丢失、无法删除。

分步修改方案 #

1. 调整FormTask组件：移除输入框的持久化存储 #

输入框内容为临时状态，无需持久化，提交任务后应清空，因此将useLocalStorage替换为普通useState：

import '../Style-sheet/FormTask.css';
import { v4 as uuidv4 } from 'uuid';
import { useState } from 'react';

function FormTask(props) {
    // 用普通state存储临时输入值
    const [input, setInput] = useState('');
  
    const handleChange = e => {
        setInput(e.target.value);
    };

    const handleShipping = e => {
        e.preventDefault();
        // 空输入不提交
        if (!input.trim()) return;

        const newTask = {
            id: uuidv4(), 
            text: input.trim(),
            fulfilled: false,
        };
        
        props.onSubmit(newTask);
        // 提交后清空输入框
        setInput('');
    };

    return (
        <form 
            className='form-task'
            onSubmit={handleShipping}>
            <input 
                className='input-task'
                type='text'
                placeholder='Write a task'
                name='text'
                value={input} // 绑定value确保受控组件
                onChange={handleChange}
            />
            <button className='button-task' type="submit">
                Add Task
            </button>
        </form>
    )
};

export default FormTask;

2. 在父组件实现任务持久化与删除逻辑 #

假设父组件为TaskContainer，使用useLocalStorage存储任务数组，同时实现删除功能：

import { useLocalStorage } from './localStorage';
import FormTask from './FormTask';

function TaskContainer() {
    // 用localStorage持久化任务列表，初始值为空数组
    const [tasks, setTasks] = useLocalStorage('tasks', []);

    // 添加任务：更新任务数组
    const handleAddTask = (newTask) => {
        setTasks(prevTasks => [...prevTasks, newTask]);
    };

    // 删除任务：过滤掉对应id的任务项
    const handleDeleteTask = (taskId) => {
        setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    };

    return (
        <div className="task-container">
            <FormTask onSubmit={handleAddTask} />
            <div className="task-box">
                {/* 渲染任务按钮 */}
                {tasks.map(task => (
                    <button 
                        key={task.id}
                        className="task-button"
                        onClick={() => handleDeleteTask(task.id)}
                    >
                        {task.text}
                        {/* 内置删除标识，可替换为图标 */}
                        <span style={{marginLeft: '8px'}}>×</span>
                    </button>
                ))}
            </div>
        </div>
    );
}

export default TaskContainer;

3. 优化useLocalStorage工具函数（可选） #

为了和React的useState行为保持一致，支持函数式更新，可微调工具函数：

import { useState } from 'react';

export function useLocalStorage (key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key)
            return item ? JSON.parse(item) : initialValue
        } catch (error) {
            console.error('读取localStorage失败:', error);
            return initialValue
        };
    });

    const setValue = value => {
        try {
            // 支持函数式更新逻辑
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore))
        } catch (error) {
            console.error('写入localStorage失败:', error);
        };
    };

    return [storedValue, setValue];
};

关键说明 #

• 任务列表持久化：将任务数组存入localStorage的tasks键，刷新时自动读取并渲染。
• 受控组件：输入框绑定value，确保输入状态可控，提交后可正确清空。
• 删除逻辑：通过filter过滤删除目标任务，更新数组时自动同步到localStorage。

修改完成后，关闭/刷新浏览器任务按钮会保留，点击按钮上的删除标识即可删除对应任务。

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