使用useContext Hook时如何避免‘setState/state未使用’警告？

当你通过useContext获取包含state和setter的上下文时，部分组件仅需其中一项会触发未使用变量警告，除了修改ESLint配置，还有以下几种实用方案：

1. 用下划线标记未使用变量 #

这是JavaScript社区约定俗成的“有意忽略变量”写法，ESLint通常会识别这种命名方式，不会触发警告：

• 仅需state的组件：

const [state, _setState] = useContext(myContext);

• 仅需setState的组件：

const [_state, setState] = useContext(myContext);

2. 解构时直接跳过不需要的变量 #

通过逗号占位跳过不需要的位置，根本不声明未使用的变量，从根源避免警告：

• 仅需state的组件：

const [state] = useContext(myContext);

• 仅需setState的组件：

const [, setState] = useContext(myContext);

3. 拆分上下文（推荐复杂场景） #

如果多个组件都只需要上下文的某一部分，可以把state和setter拆分成两个独立的上下文，让组件按需引入：
首先创建两个上下文：

import { createContext, useContext, useState } from 'react';

const StateContext = createContext();
const DispatchContext = createContext();

然后在Provider中分别提供值：

export function MyContextProvider({ children }) {
  const [state, setState] = useState('some initial state');
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={setState}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

最后组件按需使用：

• 只需要state的组件：

const state = useContext(StateContext);

• 只需要setState的组件：

const setState = useContext(DispatchContext);

这种方式让上下文职责更清晰，也避免了不必要的解构操作。

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