如何阻止 useEffect 发出如此多的请求？空依赖项不起作用

Question

我有一个更新一段状态的组件，但我遇到了问题

我声明了状态

const [data, setData] = useState([]);  

然后在我的 useEffect 中我是

useEffect(() => { 
  const fetchData = async () => {
    await axios
    .get(
      API_URL,
      {
        headers: {
          'Content-Type': 'application/json',
          'X-API-KEY': API_KEY
        },
        params:{
          "titleId": id
        }
      }
    )
    .then((response) => {
      setData(response.data.Item);
    })
    .catch((err) => {
      console.error("API call error:", err.message);
    }); 
  }  

  fetchData();         
  
}, [data, id])

如果我在我的依赖项中声明“数据”，我会得到一个无休止的请求循环，这显然是没有的好的。但是，如果我从依赖项中保留“数据”，它不会显示任何内容，尽管我在网络选项卡中成功检索了它，甚至当我在 div 标记中 {JSON.styringify(data)} 时，我得到了json 内容也是如此。所以信息在 DOM 中，但它没有更新组件

我该如何执行此操作，以便我可以发出初始请求来加载数据而不是数千个数据？

我尝试过以下操作：

• 回调函数上的 setTimeout
• 和 isCancelled 方式，并返回 (() => {callbackFunction.cancel(); })
• 并且也有一种 Abort 方式可以执行此操作，但我无法弄清楚它出来了。我见过的每个例子都是针对类组件的，

对于模糊的代码感到抱歉。如果没有大量编码和 API，我无法复制此内容。提前致谢

Answer 1

您想要设置状态，然后检查是否不同。我为此使用了一个自定义挂钩，它使用 useRef 挂钩：

export function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

const prevData = usePrevious(data);

我不知道您的数据是什么样的，但从中构建一个条件。在 useEffect 内部，您需要类似以下内容：

if (data !== prevData) fetchData()

或者

if (data.id !== prevData.id) fetchData()

然后将 prevData 添加到依赖项中：

 [data, prevData, id]

Answer 2

所以 useEffects 具有依赖关系。

有依赖项 - 更改依赖项值时 useEffect 将触发

useEffect(() => {
    // code
}, [dependency])

使用空括号 - 将在组件的首字母处触发

useEffect(() => {
    // code
}, [])

没有依赖项和括号 - 将在每次状态更改时触发

useEffect(() => {
    // code
})

Answer 3

做这样的事情，如果有帮助的话。我还使用了async/await，所以你可以检查一下。

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(API_URL, {
          headers: {
            'Content-Type': 'application/json',
            'X-API-KEY': API_KEY,
          },
          params: {
            titleId: id,
          },
        });
        setData(response.data.Item);
      } catch (err) {
        console.error('API call error:', err.message);
      }
    };

    fetchData();
  }, [id]);

  if (!data.length) return null;

  return <p>Yes, I have data</p>;
};

Answer 4

显然你会得到一个无限循环！
您正在更新 useEffect 中的数据，这意味着每次数据更改时，都会再次触发 useEffect 等等！
您应该做的是根据您的情况更改依赖项，例如：

const [data, setData] = useState([])
const [fetchAgain, setFetchAgain] = useState(false)
useEffect(()=> {
   fetchData();
}, [])

useEffect(() => {
    if(fetchAgain) {
        setFetchAgain(false)
        fetchData();
    }
}, [fetchAgain])

现在每次您想再次获取数据时，您都需要将 fetchAgain 更新为 true