javascript - 为什么 Todo 项目在两次点击提交按钮时只保存到 localStorage？

Question

我用 react 制作了简单的 Todo 应用程序，可以将项目保存在 localStorage 上，但我必须点击两次提交按钮才能保存到 localStorage。那么如果我们提交输入'Hello'，然后提交'World'，将保存到localStorage的就是文本'Hello'，如何让按钮只点击1次呢？

我们提交时，重新加载之前， 重新加载页面之后

import React, { useState, useEffect } from "react";
import "./Todo.css";

const Todo = () => {
  const [text, setText] = useState("");
  const [check, setCheck] = useState(false);
  const [todo, setTodo] = useState([]);

  useEffect(() => {
    getTodo();
  }, []);

  const updateText = e => {
    setText(e.target.value);
    console.log(text);
  };

  const getTodo = () => {
    let todoLocal = JSON.parse(localStorage.getItem("todo")) || [];
    setTodo(todoLocal);
  };

  const saveTodo = (todo = {}) => {
    localStorage.setItem("todo", JSON.stringify(todo));
  };

  const fillTodo = e => {
    e.preventDefault();

        setTodo(prevTodo => [
            ...prevTodo,
            {
              text: text
            }
        ]); 
    //localStorage.removeItem('todo');
    console.log(todo);
    saveTodo(todo);
  };

  return (
    <div className="box">
      <div className="title row">To-Do List</div>
      <div className="list">
        {todo.map((todoItem, index) => (
          <div className="row" key={index}>
            <input type="checkbox" data-index={index} />
            <p>{todoItem.text}</p>
          </div>
        ))}
      </div>
      <form className="title row" onSubmit={fillTodo}>
        <input
          id="todo-input"
          type="text"
          value={text}
          placeholder="New Todo"
          onChange={updateText}
        />
        <button className="todo-submit">+ Todo</button>
      </form>
    </div>
  );
};

export default Todo;

标签： javascriptreactjs

Answer 1

如果您认为存储在本地存储中是一个副作用，那不是更好吗

// syncs localStorage with the current todo value
React.useEffect(() => {
  localStorage.setItem("todo", JSON.stringify(todo));
}, [todo])