ReactJS：尝试打印我的数组对象的索引 - 如果我删除元素，它应该动态变化

Question

我现在正在构建基本上是一个待办事项列表应用程序，用于学习 reactjs。

这是我的初始状态

 const  [listx,setlistx] =  useState( 

        [
        {id:0,flavor:'strawberry',qty:'5'},
        {id:1,flavor:'Vanilla', qty:'3'},
        {id:2, flavor:'butterscotch', qty:'2'}
        ]
          );

我基本上想将每个元素呈现为编号列表，但不能为此使用索引。使用 map 将数据传递给组件。

            {                                
               listx.map(itemx =>(

                key={itemx.index}
                id={itemx.id}

它不识别键，但打印前 3 个元素的 id，我可以为每个元素递增和添加 id 字段，但如果我删除一个元素，它将保持静态（对吗？）

我尝试的另一件事是调用 useEffect 钩子，它确实允许我控制台记录新添加元素的索引（奇怪的是我不能这样做，否则）但我无法从 useEffect 访问任何其他方法当我试图以这种方式更新状态。

我还用arr.findIndex() 编写了一个函数，但它只在我添加元素后返回索引，我似乎无法使用

newID=findIndex(flavor,qty);
setlistx(listx[newID].id= newID;

我希望我把问题说清楚了

Answer 1

它无法识别 index，因为您的对象中没有 index

{id:2, flavor:'butterscotch', qty:'2'}

但您可以使用 id 作为唯一的密钥

listx.map(itemx => (
   key={itemx.id}
   id={itemx.id}
)

如果你想删除一个元素，我会使用过滤器

listx.filter(id => id !== idYouAreFilteringFor)

然后它将重新渲染列表而不删除已删除的列表

Answer 2

如果我理解正确，您想使用索引而不是 id，因为它是静态的并且面临删除问题？

1. 在数组映射函数中，我们有第二个参数用于索引

listx.map((itemx, index) => (...))

但在对 key 做出反应时，我建议不要使用 index.对于键，我建议使用 id 而不是索引。键用于响应渲染性能目的。对于密钥，您可以使用一些不会不断变化的唯一 ID。在您的示例中，id 不会不断变化。如果您将使用索引，如果您删除项目，该索引将保持更改

我建议使用 uuid 而不是静态硬编码 id

1. 要删除元素，您可以使用过滤器方法删除元素并将新生成的数组设置为 setlistx，如下所示

比如说你在点击删除图标时调用handleDelete方法，

const handleDelete = (id) => {
   setlistx( oldlistx => oldlistx.filter(item => item.id !== id));
}