嵌套 object 总计数

Question

我正在构建一个 React 应用程序并具有以下列表：

export const list = [
  {
    id: '1',
    group: 'sports 1',
    sports: [{
      'basketball': [
        {competed: true},
        {won: false}
      ],
      'soccer': [
        {competed: false},
        {won: false}
      ],
      'hockey': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '2',
    group: 'sports 2',
    sports: [{
      'tennis': [
        {competed: true},
        {won: false}
      ],
      'swimming': [
        {competed: true},
        {won: false}
      ],
      'baseball': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '3',
    group: 'sports 3',
    sports: [{
      'volleyball': [
        {competed: true},
        {won: false}
      ],
      'karate': [
        {competed: true},
        {won: false}
      ],
      'surfing': [
        {competed: true},
        {won: false}
      ]
    }],
    competedInAll: false
  }
];

这个列表放在带有 React 钩子的 state 中：

const [list3, updateList3] = useState(list);

然后我像这样遍历列表：

const doMagicHere = () => {};

const getStatus = (item) => {
    let length = Object.values(item.sports[0]).filter(x => !x[0].competed).length;
    return length === 0 ? 'competed in all sports' : length + " remaining"
};

<ul>
    {list3.map(item => (
    <li key={item.id}>
        {item.group} ({getStatus(item)})
        <ul>
            {Object.keys(item.sports[0]).map((sport, i) => <li key={i} onClick={() => doMagicHere()}>{sport}</li>)}
        </ul>
    </li>
    ))}
</ul>

这将创建：

• 运动 1（剩余 2 个）
  • 篮球
  • 足球
  • 曲棍球
• 运动 2（剩余 1 个）
  • 网球
  • 游泳
  • 棒球
• 运动3（参加所有运动）
  • 排球
  • 空手道
  • 冲浪

1. 如何添加 onClick 事件，以便在选择项目（设置为true ）时总计数会减少，这将允许文本读取“剩余 2 个”，然后是“剩余 1 个”，最终“参加所有运动”对于那个组

Answer 1

export const list = [
  {
    id: '1',
    group: 'sports 1',
    sports: [{
      'basketball': [
        {competed: true},
        {won: false}
      ],
      'soccer': [
        {competed: false},
        {won: false}
      ],
      'hockey': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '2',
    group: 'sports 2',
    sports: [{
      'tennis': [
        {competed: true},
        {won: false}
      ],
      'swimming': [
        {competed: true},
        {won: false}
      ],
      'baseball': [
        {competed: false},
        {won: false}
      ]
    }],
    competedInAll: false
  },
  {
    id: '3',
    group: 'sports 3',
    sports: [{
      'volleyball': [
        {competed: true},
        {won: false}
      ],
      'karate': [
        {competed: true},
        {won: false}
      ],
      'surfing': [
        {competed: true},
        {won: false}
      ]
    }],
    competedInAll: false
  }
];

//I would suggest converting the list to a more manageable structure before adding it to the react state so that the doMagicHere() is simple

const parseList = list => {
 return list.reduce((acc,item) => {
 acc[item.group] = {
  id: item.id;
  sports: Object.entries(item.sports).reduce((a,[sport,value]) => {
   a[sport] = value.reduce((x,i) => { x = {...x,...i}; return x;},{});
   return a;
  },{})
 }
 return acc;
 },{})
}
const [sportsList, setSportsList] = useState(parseList(list));

//now sportsList is a more manageable structure

const getStatus = (item) => {
    let length = Object.values(item).filter(x => !x.competed).length;
    return length === 0 ? 'competed in all sports' : length + " remaining"
};

const doMagicHere = (group,sport) => {
   setSportsList({...sportsList,sports:{...sports,sports[sport]:{...sports[sport],competed:true}}});
 }
}

<ul>
    {Object.entries(sportsList).map([group, details] => (
    <li key={details.id}>
        {group} ({getStatus(details.sports)})
        <ul>
            {Object.keys(details.sports).map((sport, i) => <li key={i} onClick={() => doMagicHere(group,sport)}>{sport}</li>)}
        </ul>
    </li>
    ))}
</ul>