在与时间相关的某个事件中更新组件的问题答案

【问题标题】：Problem of updating the component at a certain event related to time在与时间相关的某个事件中更新组件的问题
【发布时间】：2022-01-12 16:26:46
【问题描述】：

我正在使用 Firestore 在 React.js 中制作一个 Web 应用程序

我正面临更新组件的问题在与时间相关的某个事件中。

~~~~~上下文~~~~~

我从自定义挂钩接收数据：

export default function useFirestoreQuery(query: any) {
  // prettier-ignore
  const [docs, setDocs] = useState<DocumentData | null>([]);

  useEffect(
    () =>
      onSnapshot(query, (snapshot: any) => {
        setDocs(
          snapshot.docs.map((doc: any) => ({ ...doc.data(), id: doc.id }))
        );
      }),
    // eslint-disable-next-line
    []
  );

  console.log(query.type + ":");
  console.log(docs);

  return docs;
}

在组件中，我使用这个钩子获取了这些数据：

  const startOfDay = moment().startOf("day").toDate();
  const endOfDay = moment().endOf("day").toDate();

  const lessonsCollectionRef = collection(firestore, "lessons");
  const lessonsQuery = query(
    lessonsCollectionRef,
    where("beginningTime", ">", startOfDay),
    where("beginningTime", "<=", endOfDay),
    orderBy("beginningTime", "asc")
  );

这里是代码的和平，我在其中显示数据：

{lessons?.map((lesson: any, index: number) => (
                <Row key={lesson.id}>
                  <Col xs={1}>
                    <Row>
                      <Col xs={12} className="lesson-time">
                        <span className="text-muted">
                          {prettyDateByStamp(lesson.beginningTime.seconds)}
                        </span>
                      </Col>
                      <Col xs={12} className="lesson-time">
                        <span className="text-muted lesson-time">
                          {prettyDateByStamp(lesson.endTime.seconds)}
                        </span>
                      </Col>
                    </Row>
                  </Col>
                  <Col xs={11}>
                    // ~~~~~ Part where I have a problem with ~~~~~
                    <Button
                      disabled={moment(lesson.endTime.seconds * 1000).isBefore(
                        moment()
                      )}
                      variant="secondary"
                      href={lesson.conferenceLink}
                      className="lesson-btn"
                    >
                      <Row>
                        <Col xs={{ span: 1 }} className="lesson-number">
                          <h4>{index + 1}.</h4>
                        </Col>
                        <Col xs={10} className="lesson-name">
                          <h4>{lesson.name}</h4>
                        </Col>
                      </Row>
                    </Button>
                    // ~~~~~ Till here ~~~~~
                  </Col>
                </Row>
              ))}

看起来像这样：https://i.stack.imgur.com/iRqH6.png

~~~~~问题~~~~~

这个按钮有一个禁用参数

如果课程的endTime在当前时间之前（使用moment.js）该按钮被禁用

它有效！.. 当课程的 endTime 被通过时，它会被禁用，但只有当我重新加载页面时，它才会更新并被禁用

~~~~~我想要的结果~~~~~

当课程的endTime被传递时，与课程的文档相关的按钮变为禁用甚至重新加载页面所以组件需要自己理解它需要重新渲染

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

所以，总的来说，我想出了如何解决我的问题。

const [time, setTime] = useState(Date.now());

useEffect(() => {
  const interval = setInterval(() => setTime(Date.now()), 10000);
  return () => {
    clearInterval(interval);
  };
}, []);

我只是每 10 秒更新一次 React 组件。这似乎可行，但不是最佳解决方案。

【讨论】：