React项目SonarCloud报错：useState未解构为值与setter对的解决方法

问题场景 #

你的React TypeScript代码如下：

interface PRScoreObject {
    salesAmt?: any; // date-type is number
    target?: any; // date-type is number or object with key value pair
    achievement: any; // date-type is number or object with key value pair
    crscore: any; // date-type is number
}

const initializePRScoreObj = (): PRScoreObject => ({
    salesAmt: '',
    target: '',
    achievement: '',
    crscore: '',
});

// 状态定义
const [prScoreObj, setPRscoreObj] = useState<PRScoreObject>(initializePRScoreObj);

// 状态更新示例
setPRscoreObj({...prScoreObj, target, salesAmt, achievement: achObj});

运行SonarCloud检测时收到错误提示：useState call is not destructured into value + setter pair

错误原因 #

SonarCloud的这条规则要求useState的解构必须是标准的「状态变量+setter函数」配对，且命名格式需保持一致：通常setter函数命名为set[首字母大写的状态变量名]，严格遵循驼峰命名规范。

你的代码中状态变量是prScoreObj（驼峰格式，首字母小写，Score大写），但setter函数是setPRscoreObj（PR大写，score小写），命名格式不统一，导致SonarCloud无法识别这是符合规范的配对。

解决方案 #

统一状态变量和setter函数的命名格式，符合React的常规命名规范：

方案1：调整setter函数命名，匹配状态变量的驼峰格式 #

将setPRscoreObj改为setPrScoreObj，保持和prScoreObj一致的驼峰逻辑：

// 修正后的状态定义
const [prScoreObj, setPrScoreObj] = useState<PRScoreObject>(initializePRScoreObj);

// 对应的状态更新也要同步修改
setPrScoreObj({...prScoreObj, target, salesAmt, achievement: achObj});

方案2：统一使用大写开头的状态变量名 #

如果希望保持PR大写的命名风格，可将状态变量改为PRScoreObj，setter对应为setPRScoreObj：

// 修正后的状态定义
const [PRScoreObj, setPRScoreObj] = useState<PRScoreObject>(initializePRScoreObj);

// 对应的状态更新也要同步修改
setPRScoreObj({...PRScoreObj, target, salesAmt, achievement: achObj});

额外优化建议 #

1. 避免使用any类型：你的PRScoreObject接口中所有字段都用了any，建议根据注释标注的实际类型（number、对象等）定义具体类型，提升代码类型安全性。
2. 初始化函数的调用：useState接受初始化函数时，直接传递initializePRScoreObj是正确的（组件首次渲染时执行一次），如果是直接传递对象则每次渲染都会创建新对象，当前写法没问题。

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