如何使用ReactJS将子列表添加到Note应用程序？

问题描述

我是ReactJS的新手。我有一个任务-做一个像Notes的应用程序。用户可以将子列表添加到他的注释中，并且注释必须保存到子数组中的状态。我需要将子列表保存在对象内部的数组中。我需要这样的状态： [...notes,{ _id: noteId,text: noteText,notes: [{_id: subNoteId,text: subNoteText,notes[]}] }]。

我该怎么做？

此处的沙盒：https://codesandbox.io/s/relaxed-lamarr-u5hug?file=/src/App.js

谢谢您的帮助，对不起我的英语

const NoteForm = ({ saveNote,placeholder }) => {
  const [value,setValue] = useState("");

  const submitHandler = (event) => {
    event.preventDefault();
    saveNote(value);
    setValue("");
  };
  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        onChange={(event) => setValue(event.target.value)}
        value={value}
        placeholder={placeholder}
      />
      <button type="submit">Add</button>
    </form>
  );
};

const NoteList = ({ notes,saveNote }) => {

  const renderSubNotes = (noteArr) => {

    const list = noteArr.map((note) => {
      let subNote;
      if (note.notes && note.notes.length > 0) {
        subNote = renderSubNotes(note.notes);
      }
      return (
        <div key={note._id}>
          <li>{note.text}</li>
          <NoteForm placeholder="Enter your sub note" saveNote={saveNote} />
          {subNote}
        </div>
      );
    });

    return <ul>{list}</ul>;
  };

  return renderSubNotes(notes);
};

export default function App() {
  const [notes,setNotes] = useState([]);

  const saveHandler = (text) => {
    const trimmedText = text.trim();
    const noteId =
      Math.floor(Math.random() * 1000) + trimmedText.replace(/\s/g,"");
    if (trimmedText.length > 0) {
      setNotes([...notes,text: trimmedText,notes: [] }]);
    }
  };

  return (
    <div>
      <h1>Notes</h1>
      <NoteList notes={notes} saveNote={saveHandler} />
      <NoteForm
        saveNote={saveHandler}
        placeholder="Enter your note"
      />
    </div>
  );
}

解决方法

saveHandler函数中的代码是保存注释数组的位置。

具体来说，此行：

      setNotes([...notes,{ _id: noteId,text: trimmedText,notes: [] }]);

但是目前您正在保存一个空数组。如果您创建另一个名为currentNote或类似名称的有状态变量，相对于用户当前在应用程序中处理的任何注释，该怎么办？当他们处理该笔记时，有状态currentNote对象将使用相关数据进行更新，例如noteID，内容和parentID。然后，当用户完成对特定注释的编辑后，通过按Save或加号按钮以添加新的子注释等，这将触发诸如saveHandler之类的函数，以将currentNote对象添加到该注释中的“ notes”数组中。有状态的“注释”变量。我不确定我是否喜欢有状态变量notes内是否包含一个称为notes的数组。我认为这可能会引起混乱。

但是简而言之，您的setNotes行可能会变成类似（我的JS语法技能很烂）：

let newNotes= [...notes.notes];
newNotes.push(currentNote);
setNotes([...notes,notes: newNotes }]);

每次保存时，您的有状态currentNote对象都会复制到notes数组中。

reactjs reactjs