react/hook-use-state Style
它的作用
确保 useState hook 的值变量和 setter 变量采用解构并保持对称命名。
为什么这是不好的?
此规则会检查从 React.useState() 调用中解构出的值变量和 setter 变量是否采用对称命名
示例
此规则的错误代码示例:
jsx
import React from "react";
export default function useColor() {
// useState 调用没有被解构为 value + setter 对
const useStateResult = React.useState();
return useStateResult;
}jsx
import React from "react";
export default function useColor() {
// useState 调用已被解构为 value + setter 对,但标识符
// 命名不符合 [thing, setThing] 命名约定
const [color, updateColor] = React.useState();
return [color, updateColor];
}此规则的正确代码示例:
jsx
import React from "react";
export default function useColor() {
// useState 调用已被解构为 value + setter 对,其标识符
// 符合 [thing, setThing] 命名约定
const [color, setColor] = React.useState();
return [color, setColor];
}配置
allowDestructuredState
type: boolean
default: false
当为 true 时,该规则将忽略解构出的值的名称。
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/hook-use-state": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/hook-use-state": "error",
},
});bash
oxlint --deny react/hook-use-state --react-plugin版本
此规则于 v1.59.0 中添加。
