API调用上的React Reference相等问题答案

【问题标题】：React Reference equality issue on API CallAPI调用上的React Reference相等问题
【发布时间】：2022-07-14 21:50:00
【问题描述】：

我正在开发一个使用 React 调用 CoinGecko API 的应用程序，以显示包含一些信息的加密货币列表。这是useState，useEffect部分。

     const [cgData, setCgData] = useState([]);

     const fetchData = () => {
        fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&sparkline=false', {
            method: 'GET'
        })
            .then((response) => response.json())
            .then((json) => {
                setCgData(json);
            });
    }

    useEffect(() => {
        fetchData();
    }, [cgData.length]);

在 useEffect 依赖项中仅使用 cgData 而不是 cgData.length 会导致无限重新渲染，因为即使值相同，引用也不相同。

代码有效，但我不确定这是解决问题的最佳做法。如何改进解决方案？

提前感谢您的回答！

【问题讨论】：

我猜你可以将依赖数组留空，它会在组件挂载时立即获取所有信息
您希望多久调用一次fetchData？组件最初安装时一次？还是fetchData 也被从其他地方调用？你可能只需要一个空的依赖数组。

标签： javascript reactjs api react-hooks

【解决方案1】：

之所以会发生这种情况，是因为您观察到的变量每次在 useEffect 效果上都会发生变化。每次 setState 更改 CgData 时，它的指针都会更改并重新触发 useEffect。如果您只想在第一次渲染时触发此条件，则应将条件数组留空。如果在其他情况下应该触发它，那么也许您应该考虑是否应该观察 cgData，或者您是否应该在执行 fetch 后始终更新其值。

【讨论】：