交叉点观察者无法更新状态

Question

我正在尝试使用“相交观察者”创建无限滚动，但是回调功能无法更新状态。当我向下滚动时，我可以看到States的Console.Log输出，但总是相同的。

import React, { useEffect, useState, useRef } from 'react';

// Css
import './index.css';

// Components
import QuadColors from './colors-components/quad-colors';
import SearchBar from '../../components/searchBar';
export default function colors() {
  const [renderColorSets, setRenderColorSets] = useState(5);
  const containerRef = useRef();
  const footRef = useRef();

  // Intersection Observer
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setRenderColorSets(renderColorSets + 1);
        console.log(renderColorSets);
      }
    });

    observer.observe(footRef.current);
  }, []);

  return (
    <>
      <SearchBar placeholder="Color" />
      <div className="random-colors-container" ref={containerRef}>
        {[...Array(renderColorSets)].map(() => {
          return <QuadColors />;
        })}
        <div ref={footRef} />
      </div>
    </>
  );
}```

Answer 1

您应该给SETSTATE提供更新功能，而不是更新的值本身（观察者回调函数中封闭值的原因）。尝试下一步：

if (entries[0].isIntersecting) {
  setRenderColorSets((prevColorSets) => prevColorSets + 1);
  console.log(renderColorSets);
}

因此，每当您启动SetState函数时 - 您拥有状态的最新值。