ReactJS中删除已选选项时如何同步更新存储id的全局数组变量

问题根因 #

你当前的代码仅在每次选中项变化时，覆盖了myID数组中与新选中项数量一致的前N个下标位。当你删除选项后，新的选中项长度小于之前的长度，数组中超出新长度的旧id不会被自动清除，因此会出现id残留的问题。

修复方案 #

直接通过map方法基于最新的选中项生成全新的id数组，完整替换全局myID即可，不需要手动循环赋值，逻辑更简洁也能避免残留问题。

修正后的代码如下：

const myID = [] //global variable

// 原代码此处箭头函数语法错误，已补全=>
const tableContents = () => {
  const [selectedOptions, setSelectedOptions] = useState([])
  const doChange = (selectedOptions) => {
    setSelectedOptions([...selectedOptions])
    // 直接生成新的id数组替换全局myID，自动清除旧元素
    myID = selectedOptions.map(item => item.id)
  }
}
console.log(myID)

补充优化建议 #

如果全局myID仅用于存储选中项id作为查询参数，你完全可以在需要使用参数的地方直接通过selectedOptions.map(item => item.id)实时计算，不需要额外维护全局变量，避免全局数据和组件状态不同步的问题。

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