基于数组对象中Name键值交替切换两种颜色的前端实现问题问询

你的需求核心是根据Name的变化交替切换两种颜色，相同Name的元素保持同色，问题出在原代码里无法跟踪上一个元素的Name，所以没法正确切换clientId。下面是具体的解决方案：

核心思路 #

我们需要在遍历数组时记录两个状态：

• 上一个元素的Name值
• 当前使用的颜色标识（clientId，1或2）

每次遍历到新元素时，对比它的Name和上一个元素的Name：

• 如果相同，保持当前clientId不变
• 如果不同，切换clientId（1变2，2变1），同时更新上一个Name的值

修改后的代码 #

function buildProjectsGrid(data) {
  // 初始化状态：上一个名称为空，初始颜色标识为1（对应蓝色）
  let previousName = '';
  let currentClientId = 1;

  return data.map((obj) => {
    const { Name, Problem, Stage } = obj;

    // 当Name发生变化时，切换颜色标识
    if (Name !== previousName) {
      currentClientId = currentClientId === 1 ? 2 : 1;
      previousName = Name;
    }

    const clientClass = `client${currentClientId}`;
    
    return (
      <>
        <div className={`${clientClass} infoTable__text`}>{Name}</div>
        <div className={`${clientClass} infoTable__text`}>{Problem}</div>
        <div 
          className={`infoTable__text infoTable__stage ${ 
            Stage === 'Servicing' ? 'infoTable__stage_service' : 
            Stage === 'Request' ? 'infoTable__stage_request' : 
            Stage === 'Invoice' ? 'infoTable__stage_invoice' : 
            Stage === 'Closed' ? 'infoTable__stage_closed' : '' 
          }`} 
          style={{ border: 'none' }}
        >
          {Stage}
        </div>
      </>
    );
  });
}

验证示例数据 #

针对你提供的示例数据：

const sampleData = [
  {Name:'Customer 1',Problem:'Issue one',Stage:'Request'},
  {Name:'Customer 1',Problem:'Issue two',Stage:'Invoice'},
  {Name:'Customer 2',Problem:'Issue three',Stage:'Servicing'},
  {Name:'Customer 3',Problem:'Issue four',Stage:'Closed'} // 新增测试项
];

• 前两个Customer 1元素会使用client1类（蓝色）
• Customer 2元素切换为client2类（红色）
• Customer 3元素再次切换回client1类（蓝色）
  完全符合你的需求。

额外说明 #

• 如果是在React组件中使用这个函数，每次data更新时，函数内部的previousName和currentClientId都会重新初始化，不用担心状态残留问题
• 你只需要确保CSS里已经定义了client1和client2对应的颜色样式即可，比如：

.client1.infoTable__text { color: blue; }
.client2.infoTable__text { color: red; }

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