为什么反应功能组件中的回调没有读取更新的状态值

Question

我试图在反应中使用交叉点观察器实现无限滚动，但我面临的问题是在交叉点观察器的回调中，我无法读取当前“页面”和“列表”的最新值，以便我可以获取数据下一页。

import ReactDOM from "react-dom";
import "./styles.css";
require("intersection-observer");

const pageSize = 30;
const threshold = 5;

const generateList = (page, size) => {
  let arr = [];
  for (let i = 1; i <= size; i++) {
    arr.push(`${(page - 1) * size + i}`);
  }

  return arr;
};

const fetchList = page => {
  return new Promise(resolve => {
    setTimeout(() => {
      return resolve(generateList(page, pageSize));
    }, 1000);
  });
};

let options = {
  root: null,
  threshold: 0
};

function App() {
  const [page, setPage] = useState(1);
  const [fetching, setFetching] = useState(false);
  const [list, setlist] = useState(generateList(page, pageSize));

  const callback = entries => {
    if (entries[0].isIntersecting) {
      observerRef.current.unobserve(
        document.getElementById(`item_${list.length - threshold}`)
      );
      setFetching(true);
/* at this point neither the 'page' is latest nor the 'list'
*they both have the initial states.
*/
      fetchList(page + 1).then(res => {
        setFetching(false);
        setPage(page + 1);
        setlist([...list, ...res]);
      });
    }
  };

  const observerRef = useRef(new IntersectionObserver(callback, options));

  useEffect(() => {
    if (observerRef.current) {
      observerRef.current.observe(
        document.getElementById(`item_${list.length - threshold}`)
      );
    }
  }, [list]);

  return (
    <div className="App">
      {list.map(l => (
        <p key={l} id={`item_${l}`}>
          {l}
        </p>
      ))}
      {fetching && <p>loading...</p>}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当前行为： “页面”和“列表”的值始终等于初始状态而不是最新值。 第 2 页后无限滚动不起作用

预期行为：在回调函数中，它应该读取状态“页面”和“列表”的更新值。

这是这个演示的工作沙箱https://codesandbox.io/s/sweet-sun-rbcml?fontsize=14&hidenavigation=1&theme=dark

Answer 1

这里主要有两个问题，闭包和直接查询 DOM。

要解决闭包问题，请使用函数式useState和引用：

const listLengthRef = useRef(list.length);
const pageRef = useRef(page);

const callback = useCallback(entries => {
  if (entries[0].isIntersecting) {
    observerRef.current.unobserve(
      document.getElementById(`item_${listLengthRef.current - threshold}`)
    );
    setFetching(true);
    fetchList(pageRef.current + 1).then(res => {
      setFetching(false);
      setPage(page => page + 1);
      setlist(list => [...list, ...res]);
    });
  }
}, []);

const observerRef = useRef(new IntersectionObserver(callback, options));

useEffect(() => {
  listLengthRef.current = list.length;
}, [list]);

useEffect(() => {
  pageRef.current = page;
}, [page]);

尽管此代码有效，但您应该将document.getElementById替换为引用，在这种情况下，它将是对页面最后一个元素的引用。

Answer 2

您可以使用 React setState 回调方法来保证您将收到以前的值。

如下更新您的callback函数，它应该可以工作。

const callback = entries => {
  if (entries[0].isIntersecting) {
    setFetching(true);
    setPage(prevPage => {
      fetchList(prevPage + 1).then(res => {
        setFetching(false);
        setlist(prevList => {
          observerRef.current.unobserve(document.getElementById(`item_${prevList.length - threshold}`));
          return ([...prevList, ...res]);
        });
      })
      return prevPage + 1;
    })
  }
};

Answer 3

我认为问题是由于 ref 一直引用旧观察者。 每次更新依赖项时都需要刷新观察者。 它与js中的闭包有关。 我会更新您的应用程序以将回调移动到 useEffect 中

function App() {
  const [page, setPage] = useState(1);
  const [fetching, setFetching] = useState(false);
  const [list, setlist] = useState(generateList(page, pageSize));


  const observerRef = useRef(null);

  useEffect(() => {
    const callback = entries => {
      if (entries[0].isIntersecting) {
        observerRef.current.unobserve(
          document.getElementById(`item_${list.length - threshold}`)
        );
        setFetching(true);
    /* at this point neither the 'page' is latest nor the 'list'
     *they both have the initial states.
     */
        console.log(page, list);
        fetchList(page + 1).then(res => {
          setFetching(false);
          setPage(page + 1);
          setlist([...list, ...res]);
        });
      }
    };
    observerRef.current = new IntersectionObserver(callback, options);

    if (observerRef.current) {
      observerRef.current.observe(
        document.getElementById(`item_${list.length - threshold}`)
      );    
    }
  }, [list]);

  return (
    <div className="App">
      {list.map(l => (
        <p key={l} id={`item_${l}`}>
          {l}
        </p>
      ))}
      {fetching && <p>loading...</p>}
    </div>
  );
}