Reactjs -如何使用Hook useEffect和setInterval每秒向数组添加1个项

vm0i2vca 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(161)

/**
   * init array: [1, 2]
   * Expect
   * array per 1s: [1, 2, 3]
   * array per 2s: [1, 2, 3, 4]
   * array per (n)s: [1, 2, 3, 4, ..., n]
   */
  const [countList, setCountList] = useState([]);
  const counter = useRef(0);
  useEffect(() => {
    const interval = setInterval(() => {
      counter.current = counter.current + 1;
      setCountList([...countList, counter.current]);
    }, 1000);
    return () => clearInterval(interval);
  });

  return (
    <>
      <div>{countList.map((count) => count + ',')}</div>
    </>
  );

我希望每一秒，数组推送一个项目，然后在UI上显示，但数组只更新最后一个项目。Exp [1，2] =〉[1，3] =〉[1，4] ...

reactjs

来源：https://stackoverflow.com/questions/74638546/reactjs-how-to-add-1-item-to-array-per-second-by-using-hook-useeffect-and-seti

2条答案

按热度按时间

lymnna711#

正确的方法是在挂载时设置一次间隔，而不是重复设置和清除它。这有点违背了设置间隔的目的。您需要使用回调函数来获取前一个值，并将一个空的依赖项数组传递给useEffect

useEffect(() => {
    const interval = setInterval(() => {
      counter.current = counter.current + 1;
      setCountList((prev) => [...prev, counter.current]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

演示：https://stackblitz.com/edit/react-ts-1rt29v?file=App.tsx

赞(0）回复(0）举报 2022-12-03

dm7nw8vv2#

试试这个
更新countList时，必须重新生成interval。

const [countList, setCountList] = React.useState([]);
  const counter = React.useRef(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      counter.current = counter.current + 1;

      setCountList([...countList, counter.current]);
    }, 1000);

    return () => clearInterval(interval);
  }, [countList]);

赞(0）回复(0）举报 2022-12-03

我来回答

Reactjs -如何使用Hook useEffect和setInterval每秒向数组添加1个项

2条答案

相关问题

热门标签

最新问答