Edit 函数的问题会覆盖本地存储并引发错误

Question

当我尝试保存甚至弄乱我的删除功能时，我的编辑功能会覆盖本地存储。不知道问题出在哪里。我尝试在类似的帖子中找到解决方案，但无法弄清楚。完整代码的 GitHub 存储库：https://github.com/ottowoolf/NotesApp。

import React, { useState, useEffect } from "react";
import { Form, Container, Button } from "react-bootstrap";
import { useParams } from "react-router-dom";

export const Edit = ({ notes, setNotes }) => {
  const [form, setForm] = useState({
    title: "",
    text: "",
    id: "",
  });
  const { id } = useParams();

  useEffect(() => {
    let index = notes.find((n) => n.id === id);
    let selectedNote = notes[index];
    console.log(notes[index]);
    console.log(id);
    console.log(selectedNote);
    setForm(selectedNote);
  }, [id, notes]);

  const handleChange = (e) => {
    const { value, name } = e.target;
    setForm({ ...form, [name]: value, id });
    console.log(form);
  };

  const saveNote = () => {
    if (form.title.trim() !== "" || form.text.trim() !== "") {
      setNotes((note) => {
        // return array - with the object of /id/ modified
        let index = note.find((n) => n.id === id);
        let newNotes = [...note];
        newNotes[index] = form;
        console.log(newNotes[index]);
        return newNotes[index];
      });
    }
  };

  return (
    <React.Fragment>
      <Container>
        <Form className='mt-3 w-50'>
          <Form.Group controlId='formBasicEmail'>
            <Form.Control
              onChange={handleChange}
              value={form.title}
              name='title'
              type='text'
            />
          </Form.Group>

          <Form.Group controlId='formBasicPassword'>
            <Form.Control
              onChange={handleChange}
              value={form.text}
              name='text'
              as='textarea'
              cols='30'
              rows='10'
            />
          </Form.Group>
        </Form>
        <Button onClick={saveNote} className='btn btn-success'>
          Save
        </Button>
      </Container>
    </React.Fragment>
  );
};

Answer 1

分叉您的 GitHub 存储库并使用代码和框对其进行编辑

这是链接 https://codesandbox.io/s/aged-dawn-bnv6v?file=/src/pages/Edit.js

如果有任何遗漏，请告诉我。

另外，我建议您稍微清理一下您的代码。它看起来很适合 Notes 应用程序。