时间戳

首页 > 解决方案 > 如何在时间间隔后渲染新的随机上下文？

javascript - 如何在时间间隔后渲染新的随机上下文？

问题描述

我正在尝试从数组中渲染随机内容，然后从数据库中渲染。它有效，但有更好的方法吗？ 这是代码示例

import React, { useState, useEffect } from "react";
import Fade from "react-reveal/Fade";

const quotes = [
  "„111111111111111111111111111111111111111111111111111111111111111111111 “",
  "„22222222222222222222222222222222222222222222222222222222222222222222",
  "„3333333333333333333333333333333333333333333333333333333333333333333“",
];

const Quotes = () => {
  const [quote, setSeconds] = useState(0);

  useEffect(() => {
    const q = quotes;
    const interval = setInterval(() => {
      setSeconds(() => q[Math.floor(Math.random() * q.length)]);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Fade right>
      <p>{quote}</p>
    </Fade>
  );
};

export default Quotes;

标签： javascriptreactjs

解决方案


IDK 如果这更好与否，但是您可以重新排列或重新排列您的数组，然后循环遍历相同的数组。
到达最后一个元素后，再次对数组进行洗牌。

对于洗牌，您可以使用

const shuffleThis = arr => arr.sort(() => Math.random() - 0.5));

此外，如果您使用 MongoDB，那么它有一个可以使用的聚合$sample。

推荐阅读