更新滚动反应钩子上的状态

Question

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

这是我所拥有的近似值：

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>

  );

}

为什么不scrollNumber更新？

这里是一个沙箱。

Answer 1

第一个问题是您要向 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>  );}

Answer 2

import React, { useState, useEffect } from "react";import "./styles.css";export default function App() {&nbsp; const [scrollNumber, updateScrollNumber] = useState(0);&nbsp; const onScroll = () => updateScrollNumber((prevScroll) => prevScroll + 12);&nbsp; useEffect(() => {&nbsp; &nbsp; document.addEventListener("scroll", onScroll);&nbsp; &nbsp; return () => window.removeEventListener("scroll", onScroll);&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div onScroll={onScroll} className="App" style={{ height: 200000 }}>&nbsp; &nbsp; &nbsp; {console.log({ scrollNumber })}&nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; <h2>Start editing to see some magic happen!</h2>&nbsp; &nbsp; </div>&nbsp; );}

Answer 3

问题是你在 div 中使用了 onSroll 。如果你想能够在 div 内部做到这一点；将其属性溢出设置为滚动。如果你想让它在窗口滚动上工作；添加一个事件监听器。这应该有效：import React, { useState, useEffect } from "react";import "./styles.css";export default function App() {&nbsp; const [scrollNumber, updateScrollNumber] = useState(0);&nbsp; const onScroll = () => updateScrollNumber(scrollNumber + 12);&nbsp; useEffect(() => {&nbsp; &nbsp; window.addEventListener("scroll", onScroll)&nbsp; &nbsp; return () => window.removeEventListener("scroll", onScroll)&nbsp; })&nbsp; return (&nbsp; &nbsp; <div&nbsp; &nbsp; &nbsp; onScroll={onScroll}&nbsp; &nbsp; &nbsp; className="App"&nbsp; &nbsp; &nbsp; style={{ height: 200000}}&nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; {console.log({ scrollNumber })}&nbsp; &nbsp; &nbsp; <h1>Hello CodeSandbox</h1>&nbsp; &nbsp; &nbsp; <h2>Start editing to see some magic happen!</h2>&nbsp; &nbsp; </div>&nbsp; );}