如何在React中正确删除数组元素并解决子组件状态异常问题

问题根因 #

你遇到的子组件数量状态匹配错误的问题，核心原因是列表渲染时使用了数组下标index作为key属性。

原因说明 #

React在对列表进行重渲染的diff比对时，会以key作为组件实例的唯一识别标识。当你删除第一个商品（下标为0的Mocasines Pastoret 01）后，原列表中下标为1、2的商品会变成新列表的下标0、1。
此时React会认为你没有删除第一个CartItem组件，只是更新了组件的传入属性，直接复用了原第一个CartItem的组件实例，也保留了它内部维护的productCount状态（你设置的7），只是把传入的cartItem改成了原来第二个商品的信息，最终就出现了状态和商品不匹配的现象。

解决方案 #

把CartList中列表渲染的key值替换为每个商品唯一的、固定不变的业务标识即可，你的场景下商品名称是唯一的，可以直接用名称作为key：

// 修改CartList的map部分代码
{itemList.map((cartItem, index) => (
    <CartItem
        removeItem={removeItem}
        index={index}
        key={cartItem.name} // 替换原来的key={index.toString()}
        cartItem={cartItem}
    />
))}

注意事项 #

只要列表存在增删、排序、过滤这类会改变元素下标的操作，禁止使用数组下标作为key，必须使用业务层面的唯一ID、唯一名称这类固定标识作为key，才能保证组件实例和业务数据一一对应，不会出现内部状态错乱的问题。

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