React useContext问题：归档笔记无法返回主笔记组件

使用React Context API开发Google Keep克隆项目时，笔记能从主Notes组件归档到Archive组件，但无法从Archive组件取消归档回到Notes组件。

问题根源 #

1. 归档操作的数组逻辑错误 #

Notes组件的Archive函数错误地将整个addData数组添加到archive状态，而非仅添加被归档的单条笔记，导致archive数组嵌套了完整的笔记列表，而非独立的笔记对象。

2. 取消归档操作的逻辑错误 #

Archive组件的UnArchive函数存在两处问题：

• 错误访问archive[0]过滤数组，实际应直接操作archive中的单条笔记
• 取消归档时将整个archive数组添加到addData，而非当前要恢复的单条笔记

3. 归档笔记渲染逻辑错误 #

Archive组件渲染时错误取Val[0]，忽略了archive应存储单条笔记对象的结构，导致渲染失败。

修复后的代码 #

1. 修复Notes组件的Archive和Delete函数 #

// Notes组件中修改Archive和Delete函数
const Delete = (id) => {
  // 定位要删除的笔记
  const noteToDelete = addData.find(Val => Val.id === id);
  // 生成移除该笔记后的新主列表
  const updatedAddData = addData.filter(Val => Val.id !== id);
  setAddData(updatedAddData);
  // 将单条笔记添加到删除列表
  setDeleteNotes(preArr => [...preArr, noteToDelete]);
};

const Archive = (id) => {
  // 定位要归档的笔记
  const noteToArchive = addData.find(Val => Val.id === id);
  // 生成移除该笔记后的新主列表
  const updatedAddData = addData.filter(Val => Val.id !== id);
  setAddData(updatedAddData);
  // 将单条笔记添加到归档列表
  setArchive(preArr => [...preArr, noteToArchive]);
};

2. 完整修复后的Archive组件 #

import React, { useContext } from "react";
import { dataContext } from "../Components/Context";

const Archive = () => {
  const { archive, setAddData, setArchive, setDeleteNotes } = useContext(dataContext);

  const Delete = (id) => {
    const noteToDelete = archive.find(Val => Val.id === id);
    const updatedArchive = archive.filter(Val => Val.id !== id);
    setArchive(updatedArchive);
    setDeleteNotes(preArr => [...preArr, noteToDelete]);
  };

  const UnArchive = (id) => {
    const noteToUnArchive = archive.find(Val => Val.id === id);
    const updatedArchive = archive.filter(Val => Val.id !== id);
    setArchive(updatedArchive);
    // 将单条笔记添加回主列表
    setAddData(preArr => [...preArr, noteToUnArchive]);
  };

  return (
    <>
      <div className="row mt-5 d-flex">
        {archive.map((note) => {
          const { title, description, id } = note;
          return (
            <div className="note m-3" key={id} id={id}>
              <div className="fs-4 fw-bold">{title}</div>
              <br />
              <p>{description}</p>
              <div className="d-flex flex-row-reverse">
                <div
                  onClick={() => Delete(id)}
                  style={{ cursor: "pointer" }}
                  title="Delete"
                >
                  <i className="fa-regular fa-trash-can fs-4 py-2 text-danger mx-3"></i>
                </div>
                <div
                  onClick={() => UnArchive(id)}
                  style={{ cursor: "pointer" }}
                  title="Unarchive"
                >
                  <i className="fa-solid fa-arrow-up-from-ground-water fs-4 py-2 text-success"></i>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default Archive;

修复说明 #

• 所有状态更新均操作单条笔记对象，避免嵌套数组的错误
• 使用find精准定位目标笔记，filter生成新状态数组，符合React不可变状态更新原则
• 渲染归档笔记时直接遍历数组中的单条对象，修正嵌套访问的逻辑错误

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