如何将React状态变量传递到SetInterval函数

Question

我创建了一个拖放菜单，到目前为止，一切都有效，但是，我的最后一步遇到了一个小的编码问题。当拖动的项目位于容器底部（或顶部）时，我需要获取项目菜单自动滚动。我决定将其构建，以便当光标将项目拖放到底部的特定范围以下时，滚动功能将触发并以我可以设置的速度持续向下滚动。为了实现此目的，我设置了一个setInterval函数，并将不断调用滚动函数。

我的问题是，要停止setInterval并调用ClearInterval，我需要知道光标的位置不再在该范围内。每次在setInterval中调用函数时，它都会拍摄当前状态变量的快照。它没有在功能中更新这些变量（Yaxis位置）的状态，而是卡在其获得的第一个值上。

使用window.event.clienty从另一个组件获得ypoisiton。

    document.onmousemove = (e) => {
      if (dragging.state) {
        var newYPos = window.event.clientY;
        setYPos(newYPos);
        handleScroll(newYPos, dragging.state);

其余代码如下：

  const menuContainer = useRef();
  const [scrolling, setScrolling] = useState(false);
  const [yPos, setYPos] = useState(null);
  const [dragging, setDragging] = useState({
    state: false,
    index: null,
    y: null,
    height: null,
  });

  function continueScrolling() {
    console.log("continueScrolling function");
    console.log(yPos); // Same value even after updating via setYPos) 
    const date = new Date(); 
    console.log(date.toLocaleTimeString()); //Different values in accordance to the time
  }

  console.log("Index.js yPos");
  console.log(yPos); // Different values every render when dragging
  const handleScroll = (draggingYPos, isDragging) => { // This is triggered onMouseMove in another component
    if (
      draggingYPos >
        menuContainer.current.getBoundingClientRect().bottom - 100 &&
      isDragging
    ) {
      setScrolling(true); // On the first cycle scrolling == false and executes the setInterval function. Each subsequent call is then skipped. 
      if (scrolling) {
        return;
      } else {
        var intr = setInterval(function () {
          continueScrolling(); // Different method of testing and trying to get the current yPos in the function

//Commented but shows a bit of what I'm trying to accomplish
          // if (
          //   !(
          //     yPos >
          //       menuContainer.current.getBoundingClientRect().bottom - 100 &&
          //     dragging.state
          //   )
          // )
          //   clearInterval(intr);
        }, 1000);

请告诉我，如果您需要更多信息或我可以澄清的其他信息。

Answer 1

但是，这是我发现问题的临时解决方案，但是，如果有人拥有一个，以及有关功能范围，反应状态以及如何将它们传递给之间的信息，我仍然想知道一个更正确，更强大的解决方案彼此。

我意识到不建议直接突变状态，但是，这是我目前唯一的工作解决方案。如果我创建一个临时值并将其传递到setInterval中，它将第二次调用SetInterval，并且在清除后仍将处于活动状态。

如果我声明一个全局const变量，则无法用setInterval重新分配该变量。当我将带有VAR的全局变量声明时，即使我清除了它，setInterval函数仍会继续。

调整后的代码：

const [scroll, setScroll] = useState(null);

const handleScroll = (draggingYPos, isDragging) => {
    if (
      draggingYPos >
        menuContainer.current.getBoundingClientRect().bottom - 100 &&
      isDragging
    ) {
      setScrolling(true);
      if (scrolling) {
        return;
      } else {
        var count = 0;
        if (
          !(
            yPos > menuContainer.current.getBoundingClientRect().bottom - 100 &&
            dragging.state
          )
        ) {
          setScroll(
            setInterval(function () {
              count += 1;
              console.log(count);
            }, 1000)
          );
        }
      }
    } else {
      console.log("Not Scrolling");
      setScroll(clearInterval(scroll));
      setScrolling(false);
    }
  };