Question

好吧，我对钩子完全陌生，到目前为止，我们已经成功创建了一个组件：

const Dashboard = ({
  getCurrentReport,
  auth: { user },
  report: { report, loading }
}) => {
  useEffect(() => {
    getCurrentReport();
  }, [getCurrentReport]);
  return loading && report === null ? (
    <Spinner />
  ) : (
    <div className="dashboard-container">
      {!report && (
        <span className="main-text">
          make a report
        </span>
      )}
      {!report && (
        <Link className="create-button" to="/report">
          Create Report
        </Link>
      )}
      {report && (
        <Fragment>
          <div className="num-container">
            <span className="main-text">num of days: </span>
            <div className="num-number">
              <span className="header-text">
                5
              </span>
            </div>
          </div>
        </Fragment>
      )}
    </div>
  );
};

我在这里需要计算2个日期的差，一个是report.startDate，可以从redux状态访问，另一个是today（现在是Date（））。 report.startDate值的示例为2020-03-22T20:00:00.000Z

由于我还不完全了解钩子，因此我无法弄清楚在上面的组件中何处编写函数，该函数将以天为单位计算出差额，并且该函数将呈现所计算的金额而不是数字{{1 }}。

在这里我必须使用什么？另一个使用效果？

Answer 1

             <span className="header-text">
                {Number(
                  (new Date().getTime() / 1000 -
                    moment(report.startDate)
                      .toDate()
                      .getTime() /
                      1000) /
                    86400
                ).toFixed()}
              </span>

这有助于得到我需要的东西。但是，我确信必须有更好的方法，并且乐于为帮助重构代码的人提供正确的答案。

如何在一个组件中使用多个useEffect Hooks？

1 个答案: