React.js数组解构仅取Hook第二个返回值的最佳实践是什么？

你触发eslint警告的核心原因有两个：

1. 你的自定义Hook返回值是数组类型，你使用对象解构语法{}作为数组第一个位置的占位符属于语法误用，相当于尝试对数组第一项进行对象模式的解构，不但无意义，若第一项非对象类型还会引发运行时错误。
2. 你声明的解构占位没有被使用，触发了eslint的no-unused-vars规则校验。

最佳实践方案 #

方案1：用逗号直接跳过不需要的前序位置（最推荐） #

数组解构支持直接用逗号跳过对应索引位的元素，不需要声明额外变量，不会触发未使用变量警告，写法最简洁：

const [, setSearchParams] = useSearchParams();

如果需要跳过数组前N个元素，对应加N个逗号即可，比如要取第三个元素：

const [, , thirdItem] = returnArrayHook();

方案2：用下划线作为占位符（适用于对可读性有要求的团队） #

社区有约定俗成的规则：用单下划线_表示不需要使用的临时变量，这种写法可读性更强：

const [_, setSearchParams] = useSearchParams();

如果该写法触发eslint未使用变量警告，可以有两种处理方式：

• 单文件临时忽略：在对应行上方加注释 // eslint-disable-next-line no-unused-vars
• 全局规则配置：在eslint配置文件中修改no-unused-vars规则，添加忽略配置：

{
  "rules": {
    "no-unused-vars": ["error", { "varsIgnorePattern": "^_" }]
  }
}

配置后所有下划线开头的未使用变量都不会触发警告，也可以适配多个占位的场景：

const [_, __, thirdItem] = returnArrayHook();

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