Javascript 在scroll react钩子上更新状态

我希望能够在用户滚动时更新我的状态

这是我得到的近似值：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber(scrollNumber + 12);

  useEffect(() => {
    document.addEventListener('scroll', (event) => onScroll())
  },[])
  return (
    <div onScroll={onScroll} className="App" style={{ height: 200000 }}>
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[scrollNumber，updateScrollNumber]=useState（0）；
const onScroll=（）=>updateScrollNumber（scrollNumber+12）；
useffect（（）=>{
document.addEventListener（'scroll'，（事件）=>onScroll（））
},[])
返回(
{console.log（{scrollNumber}）}
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

为什么

scrollNumber

不更新

---

这是一个。

第一个问题是您正在向div添加onScroll事件。如果您在div内滚动，将调用该事件。但实际上，您是在窗口中滚动。因此，您需要在窗口滚动上附加一个事件侦听器。要做到这一点，您可以像这样使用useEffect挂钩

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  
  useEffect(() => {
      window.addEventListener("scroll", onScroll);
      return () => window.removeEventListener("scroll", onScroll);
  }, [scrollNumber]);

  const onScroll = () => {
    console.log("updating the scrollNumber");
    updateScrollNumber(scrollNumber + 12);
  };
  return (
    <div className="App" style={{ height: 200000 }}>
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[scrollNumber，updateScrollNumber]=useState（0）；
useffect（（）=>{
window.addEventListener（“滚动”，onScroll）；
return（）=>window.removeEventListener（“滚动”，onScroll）；
}，[滚动编号]；
const onScroll=（）=>{
log（“更新滚动编号”）；
updateScrollNumber（scrollNumber+12）；
};
返回(
{console.log（{scrollNumber}）}
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

有关滚动事件的更多信息，请查看。

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[scrollNumber，updateScrollNumber]=useState（0）；
const onScroll=（）=>updateScrollNumber（（prevScroll）=>prevScroll+12）；
useffect（（）=>{
文件。添加的列表（“滚动”，onScroll）；
return（）=>window.removeEventListener（“滚动”，onScroll）；
}, []);
返回(
{console.log（{scrollNumber}）}
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

问题是您在div中使用了onscroll。如果您希望能够在div中使用onscroll；将其属性溢出设置为滚动。如果你想让它在窗口滚动工作；添加一个eventListener

这应该起作用：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber(scrollNumber + 12);
  useEffect(() => {
    window.addEventListener("scroll", onScroll)
    return () => window.removeEventListener("scroll", onScroll)
  })

  return (
    <div
      onScroll={onScroll}
      className="App"
      style={{ height: 200000}}
    >
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

import React，{useState，useffect}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[scrollNumber，updateScrollNumber]=useState（0）；
const onScroll=（）=>updateScrollNumber（scrollNumber+12）；
useffect（（）=>{
window.addEventListener（“滚动”，onScroll）
return（）=>window.removeEventListener（“滚动”，onScroll）
})
返回(
{console.log（{scrollNumber}）}
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

它只更新一次，之后不再继续更新。知道为什么吗？这是因为每次状态值更改时，onScroll方法都会更改为新实例。但实际上，我们使用的是onScroll方法的第一个版本。这就是为什么我们需要在useEffect中添加依赖项。因此，每当我们的状态发生变化时，我们都会使用新版本的onScroll。

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [scrollNumber, updateScrollNumber] = useState(0);
  const onScroll = () => updateScrollNumber(scrollNumber + 12);
  useEffect(() => {
    window.addEventListener("scroll", onScroll)
    return () => window.removeEventListener("scroll", onScroll)
  })

  return (
    <div
      onScroll={onScroll}
      className="App"
      style={{ height: 200000}}
    >
      {console.log({ scrollNumber })}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}