Array.map /过滤连续数组，然后重新排序为连续数组

问题描述

使用React，我有一个列表组件，该组件使用array.map呈现项目列表。

列表项各不相同；每个其他列表项都有不同的背景颜色，具体取决于提供该列表项的数据结构的id字段是偶数还是奇数：

  ...

const useStyles = makeStyles((theme) => ({
  even: {
    backgroundColor: theme.palette.background.paper,},odd: {
    backgroundColor: "#c8c9c7",}));

...

const classes = useStyles();

...

{!list || list.length < 1 ? (
    <p>You have no assets selected...</p>
  ) : (
    list.map((items) => (
      <ListItem
        className={items.id % 2 === 0 ? classes.even : classes.odd}
        key={items.id}
      >
    ...
      />
    </ListItem>
  ))
)}

以下是其使用的数据结构的示例：

{
    {
        "id":0,"foo":"This is a bar"
    },{
        "id":1,"foo":"This is also a bar"
    },{
        "id":2,"foo":"Yes,this too,is a bar"
    }
}

我需要删除项目。正常的javascript.filter会按预期生成非连续的ID：

{
    {
        "id":0,is a bar"
    }
}

我需要它们是连续的：

{
    {
        "id":0,is a bar"
    }
}

我有一个功能可以满足我的需要，需要进行一些调整：

  const handleRemoveAsset = (id) => {
    const arraycopy = [...assetListItems];
     const filteredArray = arraycopy
       .filter((item) => item.id !== id)

     for (var i=0; i < filteredArray.length; i++) {
       filteredArray[i].id = i;
     }

    setAssetListItems(filteredArray);
  };

这行得通，但是不能简单地使用React进行for循环...我希望对此使用过滤器和/或映射，而不希望使用我拥有的for循环。

我读到您可以链接过滤器和地图并尝试使用它，但无法完全解决。我想出了这个：

   const filteredArray = array
      .filter((item) => item.id !== id)
      .map((item,index) => {
           item && item.id ? item.id : index)});

...无法编译--预期对函数调用的分配，而在.map之后的行中看到了一个表达式。

目前任何建议都将不胜感激，谢谢！

解决方法

您可以链接e.keyCode和map并从filter返回新对象，这将更新先前存在的ID。

map

,

我刚刚考虑了另一种情况，如果id不是以0开头。而且，如果您希望id中的起始resultant array作为第一个对象的id，那么这只是获得预期输出的另一种方式。

let data = [{id:0,foo:'This is a bar'},{id:1,foo:'This is also a bar'},{id:2,foo:'Yes,this too,is a bar'}];


const filterItems = (items,id) => {
  let lastPushedId = items[0]?.id;
  return items.filter(item => item.id !== id).map(item => ({
    ...item,id: lastPushedId++
  }))
}
console.log(filterItems(data,1));

//`id` of the first object is `3`
data = [{id:3,{id:4,{id:5,is a bar'}];
console.log(filterItems(data,3));

.as-console-wrapper {
  max-height: 100% !important;
}