javascript - 在 React 顶部显示最新元素

Question

我正在创建一个 React 应用程序。我想在顶部显示最后添加的注释。

Notes 是一个对象数组。如您所见，我尝试过 notes.reverse() 但不知何故它不起作用。元素仍在底部添加。

     <div>
        {notes.reverse().map((note)=> (
          <NotesCard
            note={note}
            key={note.id}
            setInputText={setInputText}
            setInputTitle={setInputTitle}
            setNotes={setNotes}
            notes={notes}
            setId={setId}
          />
          ))
        }
     </div>

我正在使用在单击提交按钮时触发的 submitHandler 函数。该函数如下所示：

  const submitHandler = () => {
    if (inputText || inputTitle) {
      setNotes([
        ...notes,
        {title:inputTitle , text: inputText, id: Math.random()*1000}
      ]);
    } else {
      alert("Notes are Empty. Type something in textarea.");
    }
    setInputText("");
    setInputTitle("");
    setId("");
  };

我还使用 updateHandler 函数来更新现有笔记。单击更新按钮时触发。每当我在这里使用 splice() 或 unshift() 设置顶部 chrome 上的更新注释时，都会停止响应并且一切都挂起。

  const updateHandler = () => {

    for (var i=0; i<notes.length; i++) {
      if (id===notes[i].id) {
        if (inputText || inputTitle) {
          notes.push(
            {title:inputTitle , text: inputText, id: Math.random()*1000}
          );
          setNotes(notes.filter((el) => el.id !== id));
        } else {
          alert("Notes are Empty. Type something in textarea.");
        }
      }
    };

    setInputText("");
    setInputTitle("");
    setId("");
  }

标签： javascriptarraysreactjsreact-native

Answer 1

移除 reverse() 并将 newNote 添加到 notesArray 的顶部

第一的

代替 {notes.reverse().map((note)=> ( //code ))}

采用{notes.map((note)=> ( //code ))}

第二

代替

setNotes([
   ...notes,
   {title:inputTitle , text: inputText, id: Math.random()*1000}
]); 

采用

setNotes([
   {title:inputTitle , text: inputText, id: Math.random()*1000},
   ...notes
]);