React中useState定义非UI渲染状态触发未使用警告的解决方法

你遇到的“变量已赋值但从未使用”的ESLint警告本质是完全准确的：

• 你用useState定义的todayYear、birthYear两个状态，既没有在JSX中渲染到页面，也没有在任何业务逻辑中读取这两个变量的当前值，连计算age的时候都是直接用接口返回的原始数据算的，根本没用到你存的这两个state。
• 这两个state的set操作，除了多余触发两次组件重渲染之外没有任何实际作用，属于典型的冗余代码。
• 顺带提一句，你当前计算age的代码本身还有bug：setAge(data.todayYear - data.birthYear)取的字段名和你之前赋值用的data.today_year、data.future_year不匹配，正常运行时算出来的age会是NaN。

1. 直接删除冗余的无用状态（绝大多数开发场景下的最优解） #

useState的设计初衷，是存储会驱动UI渲染的响应式数据，如果一个值既不需要渲染到页面，也不需要被组件其他逻辑读取，根本没有必要存在useState里。
具体操作：

• 直接删掉两行冗余的useState定义：

  // 删除这两行冗余定义
  const [todayYear, setTodayYear] = useState<string>("")
  const [birthYear, setBirthYear] = useState<string>("")
  

• 直接用接口返回的原始数据计算需要的age值，不需要把中间年份存到state里：

  const getPerson = async () => {
    try {
      const response = await getPersonRequest()
      const data = await response.data
      setName(data.name)
      // 直接用接口字段计算age，不需要存中间值
      setAge(String(data.today_year - data.future_year))
    } catch (error) {
      console.log(error)
    }
  }
  

这种写法不仅能彻底消除ESLint警告，还能避免多余的setState触发不必要的组件重渲染，完全符合React的开发范式。

2. 若确实需要保存这两个值，根据使用场景匹配存储方式 #

如果你后续开发中确实需要用到这两个年份值，只是当前还没写完读取的逻辑，可以根据是否需要响应式触发渲染选择对应的存储方式：

• 如果这两个值后续会渲染到UI上，或者变化时需要触发组件更新：正常保留useState即可，等后续逻辑里实际读取todayYear、birthYear变量时，ESLint的警告会自动消失。
• 如果这两个值需要保存，但不需要触发重渲染（比如只是后续事件里要读取做个计算，不影响页面展示）：不要用useState，改用useRef存储，既不会触发多余重渲染，也不会报未使用的警告：

  const todayYearRef = useRef<string>("")
  const birthYearRef = useRef<string>("")
  // 接口返回时直接赋值给ref的current属性
  todayYearRef.current = data.today_year
  birthYearRef.current = data.future_year
  // 后续需要读的时候从ref里取即可
  

如果是历史遗留代码、暂时无法删除冗余状态，可以用ESLint注释针对性忽略单行警告，但不推荐一上来就用：

const [todayYear, setTodayYear] = useState<string>("") // eslint-disable-line no-unused-vars

这种做法本质是跳过了静态检查的校验，留着冗余代码反而会提升后续的维护成本，优先判断代码是否真的有存在的必要。

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