时间戳

首页 > 解决方案 > 做出反应。每 N 秒填充一个状态数组，并且仅当它小于 X 长度时

reactjs - 做出反应。每 N 秒填充一个状态数组，并且仅当它小于 X 长度时

问题描述

我有以下代码

import * as React from "react";
import { useState, useEffect } from "react";


const TxContainer: React.FunctionComponent = (props) => {
  const [tx, setTx] = useState<Array<string>>([]);

  useEffect(() => {
    const interval = setInterval(() => {
      setTx((oldArr) => [...oldArr, "tx" + Math.random()]);
    }, Math.floor(Math.random() * 3000) + 1000);
    return () => clearInterval(interval);
  }, [tx.length < 10]); //this useEffect still keeps pushing even if the array is bigger than 9

  useEffect(() => {
    console.log(tx.length);
  }, [tx.length]);

  let listTx = tx.map((data, index) => (
    <p key={index}>
      {index} {data}
    </p>
  ));
  return <React.Fragment>{listTx}</React.Fragment>;
};

export default TxContainer;

我试图创建随机字符串并将它们放入一个数组中，直到该数组为 10。每当它为 10 时，它应该开始删除数组的第一个元素以继续工作和显示新数据，但那是另一回事。关键是它不会在应该停止的时候停止。

标签： reactjs

解决方案

当您在依赖数组中传递类似的比较时，useEffect它只会在结果值更改时再次调用它。基本上，这些依赖意味着“如果这个值发生任何变化，请调用useEffect”。除此之外，它在安装和卸载时被调用。因此，为了让您的代码按预期工作，您应该将计算所依赖的变量传递给依赖数组，并将useEffet.

这是您描述的代码示例，当然我不知道您是否要使用相同的超时。

useEffect(() => {
    let interval;
    if (tx.length < 5) {
      interval = setInterval(() => {
        setTx(oldArr => [...oldArr, "tx" + Math.random()]);
      }, Math.floor(Math.random() * 3000) + 1000);
    } else {
      interval = setInterval(() => {
        setTx(oldArr => [...oldArr.slice(1)]);
      }, Math.floor(Math.random() * 3000) + 1000);
    }

    return () => clearInterval(interval);
  }, [tx.length ]);`

推荐阅读