Javascript react setState不保留以前的状态

我正在try 构建一个无限滚动加载器组件，但不知何故，我的‘Items’数组重置为[](清空)，而不是像我预期的那样附加新的结果.

有几件事需要注意:

1. 当观察者进入视线时，我在网络选项卡中看到API调用.
2. 接口返回的数据 fresh 唯一(无缓存问题)

以下是相关的行文: setItems([...items, ...data.data]);//Items正在重置为[]，data.data总是一组新的新值

"use client";
import { useState, useEffect, useRef } from "react";

export function HBSInfiniteScrollList({ request = {} }) {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const observerTarget = useRef(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      const res = await fetch(request.url, request.options);
      if (res.ok) {
        const data = await res.json();        
        setItems([...items, ...data.data]);
      } else {
      }
    } catch (err) {
      console.log(err);
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          console.log("isIntersecting, fetching new data...");
          fetchData();
        }
      },
      { threshold: 1 }
    );

    if (observerTarget.current) {
      observer.observe(observerTarget.current);
    }

    return () => {
      if (observerTarget.current) {
        observer.unobserve(observerTarget.current);
      }
    };
  }, [observerTarget]);

  return (
    <div>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item.id} className="list-group-item">
            {item.name}
          </li>
        ))}
      </ul>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      length: {items.length}
      <div ref={observerTarget}></div>
    </div>
  );
}

有谁觉得有什么不对劲吗？这种类型的代码我已经写了一百万次了.也许我只是累了.