React嵌套映射导致重复渲染笔记，如何实现每次添加仅生成3个？

你当前的代码用了三层嵌套的notes.map，这会让笔记数量呈指数级增长：

• 第一次添加后，notes数组长度为1，渲染的笔记数是 1 + 1*1 + 1*1*1 = 3（符合预期）
• 第二次添加后，notes数组长度为2，渲染的笔记数是 2 + 2*2 + 2*2*2 = 2+4+8=14（和你看到的11/12个接近，可能是组件渲染的细微差异）

这完全偏离了“每次点击添加仅生成3个笔记”的需求，核心错误是不应该嵌套遍历整个notes数组，而是针对每个新增的笔记条目，直接渲染它对应的3个嵌套Note组件。

修改后的代码 #

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

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

  function addNote(newNote) {
    setNotes(prevNotes => [...prevNotes, newNote]);
  }

  function deleteNote(targetId) {
    // 从复合ID中提取原笔记的数组索引
    const originalIndex = parseInt(targetId.split("-")[0]);
    setNotes(prevNotes => prevNotes.filter((_, index) => index !== originalIndex));
  }

  return (
    <div>
      <Header />
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem, index) => {
        return (
          <React.Fragment key={index}>
            {/* 第一层笔记 */}
            <Note
              key={`${index}-1`}
              id={`${index}-1`}
              title={noteItem.title}
              content={noteItem.content}
              onDelete={deleteNote}
            />
            {/* 第二层嵌套笔记 */}
            <React.Fragment>
              <Note
                key={`${index}-2`}
                id={`${index}-2`}
                title={noteItem.title}
                content={noteItem.content}
                onDelete={deleteNote}
              />
              {/* 第三层嵌套笔记 */}
              <Note
                key={`${index}-3`}
                id={`${index}-3`}
                title={noteItem.title}
                content={noteItem.content}
                onDelete={deleteNote}
              />
            </React.Fragment>
          </React.Fragment>
        );
      })}
      <Footer />
    </div>
  );
}

export default App;

关键修改说明 #

1. 移除嵌套遍历：不再内层重复遍历整个notes数组，而是针对每个原笔记条目，直接渲染3个绑定该条目的Note组件，确保每次添加1个原笔记时，仅新增3个嵌套实例。
2. 唯一Key处理：给每个Note的key和id添加后缀（-1/-2/-3），避免同一层级出现重复key导致React渲染警告。
3. 删除逻辑适配：因为现在id是原索引-序号的复合格式，删除时提取原索引，确保删除任意一个嵌套笔记时，会移除对应的原笔记条目，同时删掉它的三个嵌套实例（如果需要单独删除单个嵌套笔记，需要调整state结构，将每个原笔记的三个嵌套实例作为子数组存储）。

内容的提问来源于stack exchange，提问作者Technavvy