React多数组状态删除指定索引元素时异常清空问题排查

问题根因 #

1. filter方法使用不符合规范：Array.prototype.filter的回调函数要求返回布尔值，返回true时保留当前遍历元素，返回false时移除。你当前的写法是删除时返回null（属于假值），保留时直接返回元素本身，如果元素本身就是假值（比如你存储的false、0等），会被直接判定为要移除，这就是删除首元素时整个数组清空、删其他元素时部分内容丢失的核心原因。
2. 索引匹配逻辑错误：你在复制生成的新数组上做遍历，却调用原state数组的indexOf方法查找元素位置，对于布尔值、数字这类基础类型，只要值重复，indexOf永远返回第一个匹配项的索引，必然会出现删错元素的问题。比如enableRD里有3个false，你要删除索引2的元素，indexOf(val)拿到的结果永远是0，只会删除第一个元素。

修复方案 #

直接使用filter回调自带的索引参数做匹配，正确返回布尔值即可，修复后的removeThis代码如下：

const removeThis = (ticker,index) => {
  setStockList(
    stockList.filter((val) => val.Tick !== ticker)
  );
  setStorePriceAllHistory(
    storePriceAllHistory.filter((_, i) => i !== index)
  );
  setStockPrice(
    stockPrice.filter((_, i) => i !== index)
  );
  setEnableRD(
    enableRD.filter((_, i) => i !== index)
  );
  setAlertPercentRD(
    alertPercentRD.filter((_, i) => i !== index)
  );
  setAlertPriceRD(
    alertPriceRD.filter((_, i) => i !== index)
  );
  setAlertedRD(
    alertedRD.filter((_, i) => i !== index)
  );
  setPriceOrPercentRD(
    priceOrPercentRD.filter((_, i) => i !== index)
  );
  setVolumeRD(
    volumeRD.filter((_, i) => i !== index)
  );
  setSettings(
    settings.filter((_, i) => i !== index)
  );
};

补充优化建议：你可以把分散的多个单值数组合并为一个对象数组，每个股票的所有配置（代码、名称、开关、阈值等）都存在同一个对象中，只维护一个state即可，完全避免多数组索引不同步的问题，代码也会更简洁易维护。

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