我有一个挑战，我想把数组的一部分加载到一个名为“loadedData”的新数组中，并且只显示加载的数据，因为组件非常重。

然而，在第一次加载时，我遇到了很多问题，因为useEffect似乎搞砸了它。第一次加载会发生两次，并且每次渲染都会将第一个数据推送到数组中一次。如果我删除“reactStrictMode”，它会按照预期工作，但我不想在不理解后果的情况下“作弊”。比我更好地理解这个问题的人把它放在那里是有原因的..

在初始加载期间，isLoading状态无法阻止第二次运行-这是我在其他与此问题相关的线程中得到的建议。

有人知道为什么第一个useEffect忽略isLoading状态以及如何处理吗？

// 尝试加载可见部分，但不要加载更多
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);

const addMoreData = async () => {
    if (loadedData.length >= data.length) return;

    const startIndex = loadedData.length;
    const preferredLoadLength = 1;

    const endIndex = startIndex + preferredLoadLength;

    const newData = data.slice(startIndex, endIndex);

    setLoadedData((prev) => [...prev, ...newData]);
};

// 检查挂载和获取数据后是否已将表格滚动到底部并立即需要获取更多数据
useEffect(() => {
    const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current;
    if (
        scrollHeight == clientHeight &&
        scrollTop == 0 &&
        loadedData.length < data.length
    ) {
        const addNewDataFunction = async () => {
            if (isLoading) {
                return;
            }
            setIsLoading(true);
            await addMoreData();
            setIsLoading(false);
        };
        addNewDataFunction();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [data.length, loadedData.length, isLoading]);