React useEffect警告以放置缺少的依赖项。但是挂钩中的依赖值发生了变化。

import React, { useState, useEffect } from 'react';

function MyComponent({ propValue }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 假设这里进行数据获取
    fetchData(propValue).then(setData);
  }, [propValue]); // 添加 propValue 作为依赖项

  return <div>{data}</div>;
}

import React, { useState, useEffect, useCallback } from 'react';

function MyComponent({ propValue }) {
  const [data, setData] = useState(null);

  const fetchDataCallback = useCallback(() => {
    fetchData(propValue).then(setData);
  }, [propValue]);

  useEffect(() => {
    fetchDataCallback();
  }, [fetchDataCallback]);

  return <div>{data}</div>;
}

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

function MyComponent() {
  const [data, setData] = useState(null);
  const someValueRef = useRef(initialValue);

  useEffect(() => {
    // 使用 someValueRef.current 而不是 someValue
    fetchData(someValueRef.current).then(setData);
  }, []); // 空依赖数组，只在组件挂载时运行一次

  return <div>{data}</div>;
}