Javascript 函数无法正确读取状态值

我的应用程序中有这个组件，我正在尝试实现无限滚动 根据 教程

export const MainJobs = () => {
  const [items, setItems] = useState([]);
  const [ind, setInd] = useState(1);
  const errText = useLang(
    "sagas // Something went wrond // fasa"
  );
  const [element, setElement] = useState(null);
  const incrementState = () => {
    console.log(ind, ind + 1); //logs 1,2
    setInd(ind + 1);
  };
  useEffect(() => {
    const fetchInfo = async () => {
      const res = await fetch(`/api/search/vacancy?page=${ind}`);
      if (res.ok) {
        const data = await res.json();
        setItems(data);
      } else {
        pop({
          icon: "error",
          title: "Oops...",
          text: errText
        });
      }
    };
    fetchInfo();
  }, [ind]);
  useEffect(() => {
    const currentElement = element;
    const currentObservor = observor.current;
    if (currentElement) {
      currentObservor.observe(currentElement);
    }
    return () => {
      if (currentElement) {
        currentObservor.unobserve(currentElement);
      }
    };
  }, [element]);
  const observor = useRef(
    new IntersectionObserver(
      entries => {
        const first = entries[0];
        if (first.isIntersecting) {
          incrementState();
        }
      },
      { threshold: 1 }
    )
  );
  return (
    <div className="mainjobs-container">
      ...rest of markup
      <div className="bottom" ref={setElement}></div>
    </div>
  );
};

export const main jobs=（）=>{
const[items，setItems]=useState（[]）；
const[ind，setInd]=useState（1）；
常量errText=useLang(
“传奇//fasa发生了什么事”
);
const[element，setElement]=useState（null）；
常量递增状态=（）=>{
console.log（ind，ind+1）；//日志1,2
setInd（ind+1）；
};
useffect（（）=>{
const fetchInfo=async（）=>{
const res=wait fetch（`/api/search/emptance？page=${ind}`）；
如果（res.ok）{
const data=wait res.json（）；
设置项目（数据）；
}否则{
流行音乐({
图标：“错误”，
标题：“哎呀……”，
文本：errText
});
}
};
fetchInfo（）；
}，[ind]）；
useffect（（）=>{
const currentElement=元素；
const currentObservor=observor.current；
if（当前元素）{
currentObservor.observe（currentElement）；
}
return（）=>{
if（当前元素）{
CurrentObservator.unobserve（currentElement）；
}
};
}，[要素]；
const observor=useRef(
新的IntersectionObserver(
条目=>{
const first=条目[0]；
如果（首先，isIntersecting）{
递增状态（）；
}
},
{阈值：1}
)
);
返回(
…标记的其余部分
);
};

它每次记录

1,2

，但不增加

ind

。同样在devtools中，ing增量为2，然后停止

每次调用

incrementState

函数时，我都需要递增

ind

。 另外，我认为问题是关于

useRef

或在

Observor

中：

为什么我在我的函数中看到陈旧的道具或状态？ 组件中的任何函数，包括事件处理程序和效果，都可以从创建它的渲染中“查看”道具和状态

恰好

incrementState

是在

useRef

中定义的，因此只“看到”初始状态

如果您只想修复单个状态，这非常简单：

const incrementState = () => {
  setInd(prevInd => prevInd + 1);
}

我们使用，这样我们就不会错过任何状态更新

但是如果这个处理程序实际上依赖于另一个状态变量呢

const observer = useRef();

// Adding a placeholder state for demo
const [secondState, setSecondState] = useState();

useEffect(() => {
  
  const incrementState = () => {
    // something to do with second state here
    if(secondState) 
      setInd(prevInd => prevInd + 1);
  };

  observer.current = new IntersectionObserver(
      entries => {
        const first = entries[0];
        if (first.isIntersecting) {
          incrementState();
        }
      },
      { threshold: 1 }
    );

}, [secondState]);  // note dependency here, ensures that each updates "sees" the new version of function

useEffect(() => {
  // observer and so on...
});

const{Component，useRef，useState，useffect}=React；
const{render}=ReactDOM；
函数App（）{
const thingRef=useRef（）；
const[count，setCount]=useState（0）；
常量递增计数器=（）=>{
setCount（prevCount=>prevCount+1）；
};
const observer=useRef(
新的IntersectionObserver(
条目=>{
const first=条目[0]；
如果（首先，isIntersecting）{
递增计数器（）；
}
},
{阈值：1}
)
);
useffect（（）=>{
const currentElement=thingRef.current；
const currentObserver=observer.current；
if（当前元素）{
currentObserver.observe（currentElement）；
}
return（）=>{
if（当前元素）{
currentObserver.unobserve（currentElement）；
}
};
}, []);
返回(
事情
{count}
);
}
render（，document.getElementById（“根”））

功能版本或将其移动到
useffect
？功能版本（单一状态）很难判断您做错了什么，但在答案中添加了一个演示