React不想添加依赖却出现缺失依赖警告，如何解决？

首先明确：不要直接抑制警告，React的依赖提示不是无意义的冗余——如果直接忽略，当数组更新后，useMemo里捕获的还是旧数组的引用，就算索引没变，后续用到的计算结果也会是旧数组对应位置的值，这会埋下隐性bug。

给你两个不用抑制警告就能实现需求的方法：

方法一：用useRef缓存数组（最稳妥） #

通过useRef维护数组的最新引用，让useMemo只依赖索引，同时总能拿到最新的数组值：

import { useState, useMemo, useRef, useEffect } from 'react';

function YourComponent() {
  const [arr, setArr] = useState([1, 2, 3]);
  const [index, setIndex] = useState(0);
  const arrRef = useRef(arr);

  // 同步数组到ref，确保ref始终指向最新的arr
  useEffect(() => {
    arrRef.current = arr;
  }, [arr]);

  // 只在index变化时重新计算
  const result = useMemo(() => {
    return arrRef.current[index];
  }, [index]);

  // ...组件其他逻辑
}

原理：arrRef会始终保存数组的最新引用，而useMemo的依赖只有index，只有索引变化时才会重新执行计算，完美符合你的需求，同时不会触发任何警告。

方法二：提取索引对应的单独状态（适合场景单一的情况） #

如果你的业务逻辑只需要当前索引对应的数组元素，可以直接把这个值单独存为状态，连useMemo都能省：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [arr, setArr] = useState([1, 2, 3]);
  const [index, setIndex] = useState(0);
  const [currentValue, setCurrentValue] = useState(arr[0]);

  // 只在index变化时更新currentValue
  useEffect(() => {
    setCurrentValue(arr[index]);
  }, [index]);

  // ...直接用currentValue即可
}

这个方法更简洁，但只适合你仅需当前索引对应元素的场景；如果需要基于该元素做复杂计算，还是方法一更灵活。

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