React中useState调用splice后视图不更新的问题求助

问题出在你直接修改了原数组的引用，React无法检测到状态变化：

• let tmpArray = localImportedCustomers只是复制了数组的引用，splice修改的是原数组本身
• 调用setLocalImportedCustomers(tmpArray)时，传入的还是原来的数组引用，React判断状态没有变化，因此不会触发视图更新

修复方案1：创建数组的浅拷贝后再修改 #

const deleteRow = (e, index) => {
    e.preventDefault();
    // 用扩展运算符创建原数组的新拷贝
    let tmpArray = [...localImportedCustomers];
    tmpArray.splice(index, 1);
    setLocalImportedCustomers(tmpArray);
}

修复方案2：使用filter方法生成新数组（更简洁） #

const deleteRow = (e, index) => {
    e.preventDefault();
    // 利用filter返回排除指定索引的新数组，同时使用函数式更新确保拿到最新状态
    setLocalImportedCustomers(prevState => prevState.filter((_, i) => i !== index));
}

额外注意事项 #

尽量不要用数组的index作为key属性，当数组元素发生增删时，会导致React的diff算法出现错误匹配，引发不必要的重渲染或渲染异常。建议使用每个数据项的唯一标识（比如id字段）作为key。

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