在 React 顶部显示最新元素答案

【问题标题】：Displaying newest element on top in React在 React 顶部显示最新元素
【发布时间】：2021-08-09 10:41:57
【问题描述】：

我正在创建一个 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("");
  }

【问题讨论】：

您是否也可以在将新对象添加到 notes 数组的位置添加代码。
你能给我看看你的笔记是什么样子的吗？
你能告诉我们你是如何在notes中添加新元素的吗
@jaybhatt 现在刚刚添加了功能检查。
您的id 不应该是随机的，您能否将它的价值作为本质上递增的东西，也许是notes.length + 1 或其他东西。拥有一个随机的id 与滥用key 一样好。

标签： javascript arrays reactjs react-native

【解决方案1】：

我认为您应该在第一个位置添加新对象，如下所示。

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

  const updateHandler = () => {
    if (inputText || inputTitle) {
      const newCopyNotes = notes.filter(el => el.id !== id);
      setNotes([
        { title: inputTitle, text: inputText, id: Math.random() * 1000 },
        ...newCopyNotes
      ]);
    } else {
      alert('Notes are Empty. Type something in textarea.');
    }

    setInputText('');
    setInputTitle('');
    setId('');
  };

删除reverse并正常映射

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

【讨论】：

我正在使用 updateHandler 函数来更新现有的笔记。我只是将它添加到 questino。在此处使用 splice() 或 unshift() 会导致浏览器挂起问题。
我已经更新了 updateHandler 的答案。

【解决方案2】：

去掉 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
]);

【讨论】：

我也在使用 updateHandler 函数来更新现有的笔记。我只是在问题中添加了它。如何在顶部添加更新的元素。使用 splice() 或 unshift() 会导致浏览器挂起问题。
如果你在 react NoteCard 组件中使用它，请检查你是否直接在渲染内部调用了 update() ？理想情况下，错误消息将是控制台中的“超出最大调用堆栈”。当时它没有响应，请分享 NotesCard 调用更新的代码
我解决了这个问题。通过在开头添加一个项目，我不小心创建了一个无限循环。我只需要再增加一次 i 来跳到下一个元素。