重新加载页面后如何保存数据

Question

我有可以帮助我创建待办事项列表的工作代码。一切都运行良好。当我单击“Enter”键时，我的页面会重新加载。同样，重新加载页面后，所有创建的元素都会消失。我有 2 个问题：您能否展示如何在重新加载后保存所有创建的元素以及如何通过按“Enter”来避免重新加载？非常感谢

import React, {useState} from "react";

export function Creating_List () {

let [allTasks, setAllTasks] = useState([]);
let [input, setInput] = useState('');

let addTask = (myInput) => {
    if (myInput){
        let newTask = {
            id: Math.random().toString(36).substr(2,9),
            task: myInput,
            complete: false
        }
            setAllTasks([...allTasks, newTask])
    }
}

let taskDone = (id) => {
    setAllTasks([allTasks.filter((todo => todo.id !== id))])
}

let handleInput = (e) => {
    setInput(e.currentTarget.value)
}

let submitTask = (e) => {
    e.preventDefault();
    addTask(input);
    setInput('');
}

return (<div className='tasks'>
            <h1>Список задач {allTasks.length}</h1>

            <form>
                <input
                    type="text"
                    value={input}
                    onChange={handleInput}
                    placeholder="Нове завдання"
                />
            </form>
            <button onClick={submitTask} type="submit">Створити</button>

            <div>
            {allTasks.map(el => <div key={el.id}>{el.task} <button onClick={taskDone}>Виконано</button> </div>)}
            </div>

        </div>)
}

Answer 1

将您的<form> 更改为<form onSubmit = {submitTask}>，这将防止页面在输入时重新加载，因为您有e.preventDefault()。如果您希望数据在重新加载后保持不变，可以使用localStorage 或Firebase 或MongoDB 之类的数据库，也可以使用Node.js 创建自己的后端。