React组件重复渲染引发多API调用问题求助

问题描述 #

现有Files父组件与NotesList子组件：

• Files渲染多个带展开按钮的文件夹卡片，用数组openFolderDetails跟踪已展开的文件夹ID，条件渲染对应NotesList组件
• NotesList通过useEffect根据传入的folder ID调用API获取笔记数据

异常现象：
点击展开第2个文件夹时，会触发第1、2两个文件夹的API请求；已展开10个文件夹后点击第11个，会触发11次重复请求，产生大量无效调用。

核心原因 #

1. 组件无差别重渲染：父组件更新openFolderDetails数组时，所有已展开的NotesList会因父组件重渲染而同步更新，即使props未变化也会触发组件刷新
2. 无请求缓存机制：相同folder ID的API请求未做缓存，每次组件刷新都会重复发起请求
3. 数组状态的引用变化：每次更新openFolderDetails都创建新数组，导致父组件状态引用变更，触发全量重渲染

修复方案 #

方案1：给NotesList添加请求缓存+防重渲染优化 #

在NotesList内部缓存已请求的数据，同时用React.memo避免不必要的组件重渲染：

import { useEffect, useRef, useState } from 'react';

const NotesList = ({ folder }) => {
  const [notes, setNotes] = useState([]);
  const fetchCache = useRef({}); // 缓存已请求的文件夹数据

  useEffect(() => {
    if (!folder) return;

    // 优先使用缓存数据，避免重复请求
    if (fetchCache.current[folder]) {
      setNotes(fetchCache.current[folder]);
      return;
    }

    // 发起API请求并缓存结果
    const fetchNotes = async () => {
      try {
        const response = await fetch(`/api/notes?folder=${folder}`); // 替换为实际API地址
        const data = await response.json();
        setNotes(data);
        fetchCache.current[folder] = data;
      } catch (error) {
        console.error('获取笔记失败:', error);
      }
    };

    fetchNotes();
  }, [folder]);

  return (
    <div>
      {notes.map(note => (
        <div key={note.id}>{note.title}</div> // 根据实际数据结构调整渲染逻辑
      ))}
    </div>
  );
};

// 用React.memo包裹，仅在props变化时重渲染
export default React.memo(NotesList);

方案2：优化父组件的状态管理逻辑 #

用对象替代数组跟踪展开状态，减少状态更新时的引用变化，同时提升展开状态的判断效率：

import { useState } from 'react';
import NotesList from './NotesList';

const files = [1, 2, 3, 4, 5]; // 示例数据

const Files = (props) => {
  // 用对象存储展开状态：key为folder ID，value为布尔值
  const [openFolderDetails, setOpenFolderDetails] = useState({});

  const toggleBtn = (folder) => {
    setOpenFolderDetails(prev => ({
      ...prev,
      [folder]: !prev[folder] // 切换对应文件夹的展开状态
    }));
  };

  return (
    <>
      {files.map((el) => {
        // 用folder ID作为组件key，而非index，提升React组件复用效率
        return (
          <div key={el}>
            <div> Folder {el} </div>
            <button onClick={() => toggleBtn(el)}>
              {openFolderDetails[el] ? 'Close notes' : 'Open notes'}
            </button>

            {openFolderDetails[el] && (
              <NotesList folder={el} {...props} />
            )}
          </div>
        );
      })}
    </>
  );
};

export default Files;

方案3：使用专业数据请求库（可选） #

如果项目中使用React Query等数据请求库，其内置的缓存机制可自动避免重复请求，同时处理加载、错误等场景：

import { useQuery } from '@tanstack/react-query';

const NotesList = ({ folder }) => {
  const { data: notes, isLoading } = useQuery({
    queryKey: ['notes', folder], // 用folder ID作为缓存标识
    queryFn: async () => {
      const response = await fetch(`/api/notes?folder=${folder}`);
      return response.json();
    },
    enabled: !!folder // 仅当folder存在时发起请求
  });

  if (isLoading) return <div>加载中...</div>;

  return (
    <div>
      {notes?.map(note => (
        <div key={note.id}>{note.title}</div>
      ))}
    </div>
  );
};

export default React.memo(NotesList);

修复效果 #

• 点击展开任意文件夹时，仅会发起该文件夹的API请求（若未缓存过）
• 已展开文件夹的NotesList组件不会重复发起请求，即使父组件状态更新

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