当其中一项的有效截止日期和时间在 React Js 中过期时如何刷新 table 数据

Question

我有一个 table 数据，其中有名为 Item、Time 和 ValidTill[ 的部分=25=] 因此，例如 Item 之一的 time 为 2022 年 4 月 2 日，3:08:01 pm 并且是 ValidTill 时间 2022 年 4 月 2 日，3:09:26 下午 所以在这个 validtill 到期后我做了一个 api调用 useEffect ，一旦组件安装，我已经在这样做了，但我也希望它在 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

因为您的 table 中可能有很多行，您希望监听每一行的到期事件，以便您可以为每个特定行发送一个 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);
});

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

Answer 2

我使用了另一种方法，而不是 运行 对每个项目进行间隔轮询，这会很贪心，我想你可以只计算从组件安装到到期时间的剩余时间，并且只需在这两个日期之间放置一个超时，我在这里举了一个例子，看看它是否可以帮助你： https://stackblitz.com/edit/react-t5jfab

我只在数组中放置了一个项目，但它适用于任何数量的项目，因为它只是循环遍历它们并放置超时。