React useEffect修改useState变量触发警告的解决方案咨询

问题根源 #

你犯了两个关键错误：

1. 直接修改useState解构出的data变量（哪怕改成let）——React的状态更新必须通过setData这类setter函数，直接赋值会绕过状态管理机制，组件重渲染后赋值会被覆盖，这就是警告的原因。
2. 没必要把const [data, setData]改成let，useState解构的状态变量本身就是只读的，修改它毫无意义。

最简解决方案（无需useRef） #

直接在useEffect里计算过滤后的数据，通过setData更新状态，data作为state可以在组件任意地方（包括外部函数）访问：

// 简化过滤逻辑
const filterrr = () => age.length !== 0;

// 保持const声明，这是React状态的正确用法
const [data, setData] = useState(Data);

useEffect(() => {
  // 直接计算过滤结果，调用setData更新状态
  const filteredData = Data.filter(filterrr);
  setData(filteredData);
}, [age])

// 外部函数直接访问data状态
const someExternalFunction = () => {
  console.log(data);
}

结合useRef的场景（需最新状态值时） #

如果你的外部函数需要始终获取最新的状态值（避免闭包导致的旧值问题），可以用useRef同步状态：

const [data, setData] = useState(Data);
// 用ref保存最新的data值
const dataRef = useRef(data);

// 状态更新时同步ref
useEffect(() => {
  dataRef.current = data;
}, [data]);

const filterrr = () => age.length !== 0;

useEffect(() => {
  const filteredData = Data.filter(filterrr);
  setData(filteredData);
}, [age])

// 外部函数通过dataRef.current获取最新值
const someExternalFunction = () => {
  console.log(dataRef.current);
}

注意：修改dataRef.current不会触发组件重渲染，界面更新仍然依赖useState的data状态。

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