React中如何访问函数生成的数组并保存到State中？

这个需求完全可以实现。非常不推荐把每个分组拆成零散的独立状态：如果日期分组是随接口数据动态生成的，动态调用useState会直接违反React Hooks的调用规则，就算分组固定，后续维护成本也很高。
最优方案是用单一值存储整个分组后的对象，不管是渲染读取还是后续更新都很方便，完全能满足你在渲染流程访问对应数据的要求。

实现代码 #

你原来写的groupByDate函数不需要改动，直接复用即可，组件里的写法参考如下：

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

// 原分组函数保持不变
function groupByDate(sortedData, date) {
  return sortedData.reduce((acc, curr) => {
    const key = curr[date];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(curr);
    return acc;
  }, {});
}

function DateListComponent({ sortedData }) {
  // 场景1：分组数据不需要单独修改，仅用于渲染：用useMemo缓存结果，避免重复计算
  const dataByDate = useMemo(() => {
    return groupByDate(sortedData, 'Date');
  }, [sortedData]);

  // 场景2：后续需要单独修改某个分组的内容，就把分组结果存在state里
  // const [dataByDate, setDataByDate] = useState(() => groupByDate(sortedData, 'Date'));
  // 如果sortedData是异步加载的，加个effect同步更新分组结果
  // useEffect(() => {
  //   setDataByDate(groupByDate(sortedData, 'Date'));
  // }, [sortedData]);

  return (
    <div className="date-list">
      {/* 遍历分组对象，直接拿到每个日期对应的独立数组 */}
      {Object.entries(dataByDate).map(([dateStr, itemList]) => (
        <section key={dateStr} className="date-block">
          <h3>{dateStr}</h3>
          {/* itemList就是当前日期对应的独立数组，直接渲染内部项即可 */}
          {itemList.map(item => (
            <div key={item.id /* 替换成你数据里的唯一标识字段 */}>
              {/* 这里写你每个条目的渲染逻辑 */}
              {item.title}
            </div>
          ))}
        </section>
      ))}
    </div>
  );
}

常见操作 #

• 读取指定日期的数组：直接通过键名访问就行，和访问独立状态没有区别

  // 获取2024-05-20对应的分组数据，做兜底避免数据不存在时报错
  const may20Data = dataByDate['2024-05-20'] || [];
  

• 更新指定日期的数组：遵循React不可变数据原则，返回新的状态对象即可

  // 给2024-05-20的分组新增一条数据
  setDataByDate(prev => ({
    ...prev,
    '2024-05-20': [...(prev['2024-05-20'] || []), newItem]
  }));
  

不推荐的写法说明 #

如果你提前100%确定所有日期分组是固定的、不会随数据变化，确实要拆成独立状态也能实现，比如固定只有两个日期分组：

const [groupA, setGroupA] = useState([]);
const [groupB, setGroupB] = useState([]);

useEffect(() => {
  const grouped = groupByDate(sortedData, 'Date');
  setGroupA(grouped['2024-05-20'] || []);
  setGroupB(grouped['2024-05-21'] || []);
}, [sortedData]);

只要分组是动态生成的，绝对不要用这种写法，会直接导致React Hooks调用顺序错乱，报渲染错误。

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