Redux中多个独立loading声明重名报错的解决方法咨询

错误原因 #

ES6 对象解构默认会将属性名作为接收变量名，而 const 声明的变量在同一块级作用域内不允许重复定义。你三个接口返回的对象都包含loading、error属性，重复声明同名变量就会触发标识符已声明的报错。

方案1：解构时重命名属性（推荐） #

通过原属性名: 自定义变量名的语法给每个状态加唯一前缀，即可实现独立声明：

// 解构重命名语法：{ 原有属性名: 新的变量名 }
const { loading: makeLoading, error: makeError, watchMakes } = watchMakeList;
const { loading: modelLoading, error: modelError, watchModels } = watchModelList;
const { loading: sizeLoading, error: sizeError, watchSize } = watchSizeList;

后续使用时分别调用对应前缀的变量即可：品牌下拉绑定makeLoading、车型下拉绑定modelLoading、尺寸下拉绑定sizeLoading，三个状态完全独立互不影响。

方案2：不解构直接读取属性 #

如果相关状态仅在少量场景使用，不需要提前解构赋值，直接在使用位置读取对应对象的属性即可，无需额外声明变量：

// 例：React 中直接绑定到下拉组件
<Select loading={watchMakeList.loading} options={watchMakes} />
<Select loading={watchModelList.loading} options={watchModels} />
<Select loading={watchSizeList.loading} options={watchSize} />

该方案适合简单场景，代码更简洁无需维护多个变量。

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