反应：array.map() function 在处理新添加的 object 在 0 索引处的数组时无法正确渲染组件

Question

在下面的 REACT 代码方面需要帮助。 制作一个笔记应用程序并尝试让它在我的笔记列表的顶部出现一个新的笔记。 当我在数组末尾添加新注释时，我的代码可以正常工作，但是如果我切换它以便在开头添加它时像这样：

const newNotes = [newNote, ...notes];

然后它会显示所有相同的旧音符，最后一个音符重复两次。 负责在屏幕上显示注释的代码如下所示。

  const listNotes = ()=>{
    console.log(notes);
    return notes.map((obj, index) => (
      <Note
        key={index}
        id={obj.id}
        subject={obj.subject}
        text={obj.text}
        date={obj.date}
        handleDeleteNote={deleteNote}
      />
    ))
  }

经过一些调试后，我注意到新列表已成功创建，并且 map 正在“成功”创建注释组件，当我在 map ZC1C425268E68385D1AB5074C17A94F 之前将注释打印到控制台时，它似乎表明新创建的列表很好。 但是当它到达“.map()”时，由于某种原因它没有完全遵循列表，几乎就像它没有意识到列表中有一个新项目，直到它重新编写笔记的一半。

下面是组件的完整代码。

import React, { useState, useEffect } from "react";
import { nanoid } from "nanoid"; //allows for random IDs
import NoteSearch from "./NoteSearch"; // component that searches notes
import Note from "./Note"; // Component for saved notes 
import AddNewNote from "./AddNewNote"; //Component to add new note

const NotesList = () => {
  // States
  const [notes, setNotes] = useState([
    {
      id: nanoid(),
      subject: "Fruit",
      text: "bananas are awesome",
      date: "9/23/2022",
    },
    {
      id: nanoid(),
      subject: "ew",
      text: "onions are awesome",
      date: "9/24/2022",
    },
    {
      id: nanoid(),
      subject: "veggie",
      text: "carrots are awesome",
      date: "9/25/2022",
    },
  ]);

  // Add and Delete Note handlers
  const addNote = (subject, text) => {
    const date = new Date();
    const newNote = {
      id: nanoid(),
      subject: subject,
      text: text,
      date: date.toLocaleDateString(),
    };
    const newNotes = [newNote, ...notes];
    setNotes(newNotes);
  };
  const deleteNote = (CurrentID) => {
    const newNotes = notes.filter((note)=>note.id !== CurrentID);
    setNotes(newNotes);
  };

//functions 
  const listNotes = ()=>{
    console.log(notes);
    return notes.map((obj, index) => (
      <Note
        key={index}
        id={obj.id}
        subject={obj.subject}
        text={obj.text}
        date={obj.date}
        handleDeleteNote={deleteNote}
      />
    ))
  }

  // This is the notes app DOM
  return (
    <div className="notes-wrapper">
      <NoteSearch />
      <div className="all-notes">
        <AddNewNote handleAddNote={addNote}/>
        {
          listNotes()
        }
      </div>
    </div>
  );
};

Answer 1

使用id作为键而不是索引：

   <Note
    key={obj.id}
    id={obj.id}
    subject={obj.subject}
    text={obj.text}
    date={obj.date}
    handleDeleteNote={deleteNote}
  />

您正在动态更改列表，不鼓励使用索引作为键，这可能会导致问题。

React doc.：如果项目的顺序可能发生变化，我们不建议对键使用索引。

Answer 2

这是因为您使用索引作为键。 React 认为您不想卸载/重新安装前 n 个节点（那些已经存在的节点）。 它只会更新他们的道具。 您的 Node 组件可能会在构造函数中或在组件安装后初始化其 state 并且不会在道具更改时重新计算 state。 因此，列表不会在视觉上更新，除了最后一个新节点。

使用 id 作为键应该可以解决问题。