React.js中按ObjectId筛选数据并计算客户总费用的问题优化

问题根源 #

你的问题本质是搜索返回的原始数据未按客户ID（clientdetails._id）分组，导致每个客户的每一条文档都单独渲染了表格，总费用也累加了所有文档的金额，而非同一客户下的费用总和。

优化步骤 #

1. 对搜索结果按客户ID分组 #

在获取到搜索结果后，先通过reduce方法将相同clientdetails._id的文档归为一组，每组包含客户基础信息、对应文档列表以及该客户的总费用。

在类组件的搜索处理方法（比如handleSearch或componentDidUpdate中处理搜索结果的逻辑）中添加分组逻辑：

// 假设你的搜索结果存储在this.state.searchResults中
groupClients = () => {
  const { searchResults } = this.state;
  // 按clientdetails._id分组
  const grouped = searchResults.reduce((acc, item) => {
    const clientId = item.clientdetails._id;
    // 如果该客户还未创建分组，初始化分组结构
    if (!acc[clientId]) {
      acc[clientId] = {
        client: item.clientdetails,
        docs: [],
        totalCost: 0
      };
    }
    // 将当前文档加入对应客户的分组
    acc[clientId].docs.push(item);
    // 累加该客户的费用（假设每个文档的费用字段为cost，根据你的实际字段调整）
    acc[clientId].totalCost += item.cost;
    return acc;
  }, {});
  // 将分组对象转为数组，方便后续渲染
  this.setState({ groupedClients: Object.values(grouped) });
};

2. 修改渲染逻辑，按分组渲染表格 #

原来的代码是遍历所有文档渲染表格，现在改为遍历分组后的客户数据，每个客户只渲染一个表格，表格内展示该客户的所有文档，底部显示该客户的总费用：

render() {
  const { groupedClients } = this.state;
  return (
    <div className="search-results">
      {groupedClients.map(clientGroup => (
        <div key={clientGroup.client._id} className="client-table-wrapper">
          <h4>客户：{clientGroup.client.name}</h4>
          <table border="1">
            <thead>
              <tr>
                <th>文档ID</th>
                <th>费用</th>
                {/* 其他需要展示的文档字段 */}
              </tr>
            </thead>
            <tbody>
              {clientGroup.docs.map(doc => (
                <tr key={doc._id}>
                  <td>{doc._id}</td>
                  <td>{doc.cost}</td>
                  {/* 其他文档字段 */}
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td>客户总费用</td>
                <td>{clientGroup.totalCost}</td>
              </tr>
            </tfoot>
          </table>
        </div>
      ))}
    </div>
  );
}

3. 同步搜索触发时机 #

确保在搜索完成、获取到新的searchResults后，立即调用groupClients方法更新分组数据。比如在handleSearch的异步请求回调中：

handleSearch = async () => {
  const searchKeyword = this.state.searchKeyword;
  try {
    const res = await fetch(`/api/search?name=${searchKeyword}`);
    const searchResults = await res.json();
    this.setState({ searchResults }, () => {
      // 搜索结果更新后，执行分组逻辑
      this.groupClients();
    });
  } catch (err) {
    console.error('搜索失败:', err);
  }
};

效果验证 #

按WADE IVAN搜索时，会生成一个表格，包含该客户的所有文档，总费用计算为该客户下所有文档的费用之和（即180），不会再出现重复表格和错误的总金额。

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