在使用useEffect和useState执行inView时增加数字

Question

我需要显示一个数字，从0开始并增加到X。这种“计数”需要发生时，用户的达到视图中的数字，如this example。

为此，我尝试使用useEffect、useState和useInView，来自react-intersection-observer。

但是，在我的代码中，我的数字有点疯狂，只从1变为2。

我已经创建了一个可以多次使用的组件，如下所示：

function NumericIndicator(props) {
  const [counting, setCounting] = useState(false);
  const [number, setNumber] = useState(0);
  const [ref, inView] = useInView();

  useEffect(() => {
    setInterval(() => {
      if (number < props.value) {
        setNumber(number + 1);
      } else {
        setNumber(props.value);
      }
    }, 500);
  }, [counting]);

  useEffect(() => {
    if (inView && !counting) {
      setCounting(true);
    }
  }, [inView]);

  return (
    <div ref={ref}>
      <h1>{number}</h1>
      <p>
        <small>This needs to increase from 0 to {props.value}</small>
      </p>
    </div>
  );
}

下面是我的代码的完整StackBlitz

谢谢!

Answer 1

试一试

import React from 'react';
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import './style.css';

export default function App() {
  return (
    <div>
      <div style={{ minHeight: '100vh' }}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
          convallis sagittis finibus. Maecenas mauris odio, feugiat vel orci
          non, consectetur placerat turpis. Proin tincidunt ut tellus posuere
          euismod. Donec id venenatis dui. Quisque ultrices dignissim ipsum ut
          tempus. Praesent mollis elit ac magna laoreet tempus at a dui.
          Suspendisse sed venenatis arcu, quis commodo sapien. Ut at malesuada
          dui. Curabitur feugiat elementum ligula, a pellentesque tortor. Fusce
          id nisl ornare, congue dui vitae, ornare ex. Class aptent taciti
          sociosqu ad litora torquent per conubia nostra, per inceptos
          himenaeos.
        </p>
        <p>
          Vivamus blandit leo ac magna efficitur vulputate. Praesent vitae magna
          elit. Nullam non metus nec mauris maximus tincidunt a ac velit. Aenean
          elit metus, aliquet at gravida ornare, commodo gravida nisl. Cras
          vestibulum lacinia erat sit amet cursus. Donec pretium enim porttitor
          magna tincidunt, a venenatis sem bibendum. Aenean ornare enim et odio
          pharetra iaculis. Class aptent taciti sociosqu ad litora torquent.
        </p>
      </div>
      <div style={{ height: '50vh', backgroundColor: '#27ae60' }}>
        <NumericIndicator value={10} />
      </div>
      <div style={{ height: '50vh', backgroundColor: '#e67e22' }}>
        <NumericIndicator value={70} />
      </div>
      <div style={{ height: '50vh', backgroundColor: '#9b59b6' }}>
        <NumericIndicator value={90} />
      </div>
      <div style={{ height: '50vh', backgroundColor: '#2c3e50' }}>
        <NumericIndicator value={110} />
      </div>
    </div>
  );
}

function NumericIndicator(props) {
  const [number, setNumber] = useState(0);
  const [ref, inView] = useInView();

  useEffect(() => {
    if (!inView) return () => {};

    const interval = setInterval(() => {
      setNumber((prev) => Math.min(prev + 1, props.value));
    }, 500);

    return () => clearInterval(interval);
  }, [inView, props.value, number]);

  return (
    <div ref={ref}>
      <h1>{number}</h1>
      <p>
        <small>This needs to increase from 0 to {props.value}</small>
      </p>
    </div>
  );
}