React购物列表删除指定索引元素后组件未更新渲染问题

错误原因 #

1. splice 方法调用逻辑错误 #

splice 会直接修改调用它的原数组，返回值是被删除元素组成的数组，而非修改后的原数组。你现有代码中的setState((prev) => [...prev.splice(idx, 1)])等价于把被删掉的元素组装成新数组赋值给状态，所以点击删除Apple时，状态被设置为[{name: 'Apple', price: 60}]，就会出现要删的元素保留、其他元素消失的现象。

2. 数组下标作为key的潜在问题 #

动态增删的列表使用数组下标作为key，会导致React虚拟DOM Diff算法匹配元素时出现错乱，后续列表条目变多后还会出现更多渲染异常，建议使用业务唯一标识作为key。

修复方案 #

直接用filter方法生成删除指定下标后的新数组即可，同时替换key的取值、删除冗余的空标签节点：

import React, { useState } from 'react';
import { CButton, CDeleteButton } from '@custom/pkg';

const ShoppingList = () => {
    const [state, setState] = useState(
        [{ name: 'Apple', price: 60 }, { name: 'Banana', price: 20 }]
    )

    return (
        <>
            <h2>Product List</h2>
            {state.map(({name, price}, idx) => (
                <div key={name}>
                    <div>{name}</div>
                    <div>{price}</div>
                    <div>
                        <CButton id={idx} onClick={() => {
                            setState((prev) => prev.filter((_, index) => index !== idx))
                        }}>
                            <CDeleteButton/>
                        </CButton>
                    </div>
                </div>
            ))}
        </>
    )
}

export default ShoppingList;

如果你的商品数据后续会有重名的情况，给每个商品加唯一的id字段，把key换成id即可。

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