根据数组的每个对象中的键值更改颜色

Question

问题：我有一组对象。每个对象都有一个名称键。有时名称会相同。当名称相同时，我希望颜色保持不变。在名字不同的时候，想要不同的颜色。我只想使用 2 种不同的颜色，根据名称的变化来回切换。

我在尝试什么：使 clientId 代表数字 1 或 2。如果是 1，则将其设为蓝色，如果是 2，则将其设为红色。但是我不知道如何正确地迭代所有内容。

function buildProjectsGrid(data) {
    return data.map((obj) => {
      const { clientId = problem here, Name, Problem, Stage } = obj;
      const clientClass = `client${clientId}`;
      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'
                : null
            }`}
            style={{ border: 'none' }}
          >
            {Stage}
          </div>
        </>
      );
    });
  }

示例数据：

[{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' 它需要返回到 blue

Answer 1

因此请跟踪名称并在名称更改时翻转颜色

function buildProjectsGrid(data) {
    let lastName = data[0]?.Name;
    let rowState = false;
    return data.map((obj) => {
      if (lastName !== obj.Name) {
        rowState = !rowState;
        lastName = obj.Name;
      }
      const colorClass = rowState ? 'red' : 'blue';
      ...

Answer 2

我认为如果使用对象来映射要添加的类会更干净

像这样


const classMapping = {
   Servicing: 'infoTable__stage_service',
   Request: 'infoTable__stage_request',
   Invoice: 'infoTable__stage_invoice',
   Closed: 'infoTable__stage_closed'

}

const colorClass = ['blue', 'red']

function buildProjectsGrid(data) {
    let lastName = '';
    let lastColor = -1
    return data.map((obj) => {
      const { Name, Problem, Stage } = obj;
      if(lastName !== Name){
       lastName = Name
       lastColor = (lastColor + 1) % colorClass.length 
      }
      const clientClass = colorClass[lastColor];
      return (
        <>
          <div className={`${clientClass} infoTable__text`}>{Name}</div>
          <div className={`${clientClass} infoTable__text`}>{Problem}</div>
          <div
            className={`infoTable__text infoTable__stage ${classMapping[Stage] || ''}`}
            style={{ border: 'none' }}
          >
            {Stage}
          </div>
        </>
      );
    });
  }

根据数组的每个对象中的键值更改颜色

Change color based on a keys value in each object of array

javascript

iteration

reactjs