React项目导入confirmDialog后声明同名useState变量报已声明错误如何解决？

你在当前组件的同一作用域下两次声明了confirmDialog标识符：

• 第一次是导入语句中，将引入的弹窗组件命名为confirmDialog
• 第二次是调用useState时，将解构得到的状态变量命名为confirmDialog
  JS语法不允许同一块级作用域内，对import/const/let类型的标识符做重复声明，因此抛出该错误。

另外你当前代码还存在隐藏问题：导入的组件命名为小写开头的confirmDialog，但实际渲染时使用的是大写开头的<ConfirmDialog>，二者名称不匹配，就算没有重复声明问题也会导致组件引用失败。

推荐优先使用第一种方案，同时解决命名不规范和重复声明两个问题：

• 方案1：调整导入组件的命名，符合React组件大写开头的规范
  将导入语句修改为：

  import ConfirmDialog from '../../components/confirmDialog/ConfirmDialog';
  

  调整后导入的组件名称为大写的ConfirmDialog，和你后续渲染时的组件标签名完全匹配，同时和小写的状态变量confirmDialog不会产生命名冲突。
• 方案2：修改状态变量的命名
  如果你不想调整导入语句，可将useState的状态变量重命名，避免和导入的标识符重名即可，示例：

  const [confirmDialogState, setConfirmDialogState] = useState({isOpen: false, title: '', subTitle: ''});
  

  对应的组件传参同步修改为：

  <ConfirmDialog
    ConfirmDialog={confirmDialogState}
    SetConfirmDialog={setConfirmDialogState}
  />
  

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