React按条件分配Lease给Collector的重复分配问题求助

核心思路是先把符合条件的Lease和Collector筛选出来，再通过均匀分配逻辑把Lease分给对应的Collector，自动适配1个或多个Collector的场景。

可行方案一：轮询分配法（简单高效） #

这种方法通过Lease索引对Collector数量取模，把每个Lease分配给对应的Collector，天然避免重复，且适配所有场景：

import { useMemo } from 'react';

// 假设你的组件中已经拿到了筛选后的Lease和Collector列表
const LeaseAssignment = ({ filteredLeases, matchedCollectors }) => {
  // 用useMemo缓存分配结果，避免重复计算
  const assignedCollectors = useMemo(() => {
    if (!matchedCollectors.length || !filteredLeases.length) return [];

    return matchedCollectors.map((collector, collectorIdx) => {
      // 轮询分配：索引取模匹配Collector
      const myLeases = filteredLeases.filter((_, leaseIdx) => {
        return leaseIdx % matchedCollectors.length === collectorIdx;
      });
      return { ...collector, myLeases };
    });
  }, [filteredLeases, matchedCollectors]);

  return (
    <div className="collector-assignments">
      {assignedCollectors.map((collector) => (
        <div key={collector.id} className="collector-card">
          <h4>{collector.name}</h4>
          <div className="lease-list">
            {collector.myLeases.map((lease) => (
              <div key={lease.id} className="lease-item">
                租约ID: {lease.leaseId} | 逾期天数: {lease.daysPastDue}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

效果说明 #

• 当只有1个Collector时，所有Lease的索引%1都是0，会全部分配给这个Collector
• 当有2个Collector时，索引0、2、4...的Lease给第一个，1、3、5...给第二个，完全不重复

可行方案二：切片分配法（分配更均衡） #

如果需要更均匀的分配（比如总Lease数不能被Collector数整除时，前面的Collector多拿1个），可以用切片截取的方式：

import { useMemo } from 'react';

const LeaseAssignment = ({ filteredLeases, matchedCollectors }) => {
  const assignedCollectors = useMemo(() => {
    if (!matchedCollectors.length || !filteredLeases.length) return [];

    const totalLeases = filteredLeases.length;
    const collectorCount = matchedCollectors.length;
    const baseCount = Math.floor(totalLeases / collectorCount);
    const remainder = totalLeases % collectorCount;
    let currentStartIdx = 0;

    return matchedCollectors.map((collector, idx) => {
      // 前remainder个Collector多拿1个租约
      const takeCount = idx < remainder ? baseCount + 1 : baseCount;
      // 截取对应的租约片段
      const myLeases = filteredLeases.slice(currentStartIdx, currentStartIdx + takeCount);
      currentStartIdx += takeCount;
      return { ...collector, myLeases };
    });
  }, [filteredLeases, matchedCollectors]);

  // 渲染部分和方案一一致
  return (
    <div className="collector-assignments">
      {assignedCollectors.map((collector) => (
        <div key={collector.id} className="collector-card">
          <h4>{collector.name}</h4>
          <div className="lease-list">
            {collector.myLeases.map((lease) => (
              <div key={lease.id} className="lease-item">
                租约ID: {lease.leaseId} | 逾期天数: {lease.daysPastDue}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

效果说明 #

比如5个Lease分给2个Collector：第一个拿3个，第二个拿2个，分配比轮询法更直观，适合需要连续分配租约的场景。

关键注意点 #

• 一定要用useMemo缓存分配结果，避免组件每次渲染都重新计算，提升性能
• 确保filteredLeases和matchedCollectors是稳定的数组（比如从useState或useSelector获取时不要每次生成新数组），否则分配结果会频繁变化

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