どのようにしての再レンダリングは、JSコンポーネントは毎分反応するトリガすることができますか？

タイラーTurden：

コンテキスト：
フックが定義され、ファイルが変更された最後の時間のタイムスタンプを含むオブジェクトを返します。

私は、彼らが最後に保存されているので、それがされてましたどのくらいのユーザーを表示するには、今までのタイムスタンプの差分を計算します。

const StageFooter = (props) => {
  const [, , meta] = useMetadata("Tenant Setup Data", "setupData")

  return (
    <StageControls>
      <div id="footer-start"></div>
      <SavingBlock key={meta?.modified}>
        {`Last saved ${
          meta.modified !== undefined ? formatDistanceToNow(meta.modified) : " "
        } ago`}
      </SavingBlock>
      <div id="footer-end"></div>
    </StageControls>
  )
}

export default StageFooter

問題：
今、リアルタイムで更新されませんまでのタイムスタンプから計算された差。例えば、それは「最後の10分前に保存された」が、数分経過後の文字列は同じままだと思います。ユーザーは背中やユーザーの更新ページならば、ページから移動した場合にのみ更新します。

念頭に置いてこのすべてで、私は基本的にコンポーネントに値がリアルタイムで更新されるように分が経過するたびに再描画していますよ。

御時間ありがとうございます！

Vencovsky：

あなたは、呼び出した効果を作成することができますsetTimeout毎分と時間を表示するとき、ちょうど日から減算します。

また、あなたはコンポーネント内にこれを使用している場合は、このためのsepareteコンポーネントを作る必要があり、それ意志ではない穴コンポーネント「毎分」と再レンダリングのみ「最後の変更以来のx分」テキスト再レンダリング

const [fakeCurrentDate, setFakeCurrentDate] = useState(new Date()) // default value can be anything you want

useEffect(() => {
    setTimeout(() => setFakeCurrentDate(new Date()), 60000)
}, [fakeCurrentDate])

...

{/* display time passed since*/}
<div>{fakeCurrentDate - modifiedDate}</div>

作業codesandbox（あなたが変更を確認するのに数分待つ必要があります）

スターリングアーチャーはコメントで言ったように。しかし、これは良いですか？うーん...誰が知っていますか？

---

アドバイス

このため別のアプローチは、メッセージ表示さだろうUpdated at XX:XX time代わりに何分が経過している方法をユーザーに示すのを。しかし、これは技術よりもUXについて多くあります