React中向tableData数组添加对象并按日期合并selectedData

实现逻辑 #

每次表单提交新数据时，按以下规则更新tableData状态：

• 检查现有数组中是否存在相同日期的条目
• 存在则将新的selectedData对象追加到该条目的selectedData数组中
• 不存在则新增条目，同时将单个selectedData对象转为数组格式

代码实现 #

import { useState } from 'react';

const YourComponent = () => {
  const [tableData, setTableData] = useState([]);

  // 处理表单提交的函数
  const handleFormSubmit = (newData) => {
    setTableData(prevData => {
      // 查找当前日期是否已存在
      const existingEntry = prevData.find(item => item.date === newData.date);
      
      if (existingEntry) {
        // 存在则合并selectedData数组
        return prevData.map(item => 
          item.date === newData.date
            ? { ...item, selectedData: [...item.selectedData, newData.selectedData] }
            : item
        );
      } else {
        // 不存在则新增条目，将selectedData转为数组
        return [...prevData, { ...newData, selectedData: [newData.selectedData] }];
      }
    });
  };

  // 组件其余逻辑...
  return (
    // 组件JSX...
  );
};

export default YourComponent;

可选优化：去重selectedData #

如果需要避免selectedData数组中出现重复对象，可以根据具体字段（如somedata）增加去重判断：

// 修改合并逻辑部分
return prevData.map(item => 
  item.date === newData.date
    ? {
        ...item,
        selectedData: [
          ...item.selectedData,
          // 仅当不存在相同somedata的对象时才添加
          ...(!item.selectedData.some(data => data.somedata === newData.selectedData.somedata) 
            ? [newData.selectedData] 
            : [])
        ]
      }
    : item
);

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