当其中一个项目的有效期和时间在React JS中到期时，如何刷新表数据

Question

我有一个表数据，其中有名为 Item、Time 和 ValidTill 的部分 例如，其中一个项目的时间为2022 年 4 月 2 日下午 3:08:01，并且ValidTill strong> 时间 2022 年 4 月 2 日下午 3:09:26 所以在这个 validtill 过期后，我在 useEffect 中进行了 api 调用，我已经这样做了一次组件已安装，但我也希望它在 validTill 过期时运行，那么如何实现

const [quotesData, setQuotesData] = useState([]);

useEffect(() => {
  getRandomdata();
}, []);
async function getRandomdata() {
  const result = await RandomApi.get(`/quotes/${symbolId}`);
  setQuotesData(result.data.payload);
}

    <Table stickyHeader className={classes.stickyHeader}>
      <TableHead>
        <TableRow>
          <TableCell>Item</TableCell>
          <TableCell>Time</TableCell>
          <TableCell>Validtill</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {quotesData.map(({Item, time, valid_till }) => (
          <TableRow key={Item}>
            <TableCell>{Item}</TableCell>
            <TableCell>
              {moment(time).format("MMMM Do YYYY, h:mm:ss a")}
            </TableCell>
            <TableCell>
              {moment(valid_till).format("MMMM Do YYYY, h:mm:ss a")}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>

Answer 1

我使用了另一种方法，而不是为每个项目运行间隔轮询，这将是贪婪的，我认为您可以从安装到有效期的那一刻起就可以计算出剩下的时间，而只是放置一个超时的时间两个日期，我在这里举了一个例子，看看它是否可以帮助您：
https://stackblitz.com/edit/reaectt/reaect-t5jfab

我在数组，但它可以与任何数量的项目一起使用，因为它只是在它们中循环并放置超时。

Answer 2

因为您的表中可能有很多行，并且您希望监听每一行的到期事件，以便您可以为每个特定行发送 API 请求，对吗？

要实现它，您可以使用 setInterval javascript 函数设置每秒的间隔，并在 setInterval 回调的正文中，您可以像这样检查每行的到期时间。

    useEffect(() => {
      setInterval(() => {
    // loop on each row an compare time to current time for expiration check if expired send the api request
        

    quotesData.map(({ Item, time, valid_till }) => {
      if (valid_till > currentTime) {
        // expired
        //send api request
      }
    });
  }, 1000);
});

如果您的数据集不太大，这可能是一个很好的解决方案。对于更大的数据集，我们必须对代码进行更多调整。