每次显示组件时如何调用函数?

时间:2020-06-11 20:47:09

标签: reactjs react-redux

我是React的新手,正在从事一个项目,以更好地了解其所有概念。我目前正在构建一个时间跟踪应用程序,该应用程序允许用户跟踪来自不同项目的任务之间的时间。

我正在使用Redux,并将Projects的列表存储在我的应用程序状态中,每个列表都包含Tasks的列表。每个任务都有一个totalDurationInSeconds属性。

我想创建一个“报告”页面。当前在报告页面上,我只想显示所有项目的总持续时间(以秒为单位)。首次启动应用程序时,时间为0。如果将任务添加到其中一个项目中,则时间会更新。

但是,当我将第二个任务添加到同一项目或另一个项目时,该值不会得到更新,并且仍然仅显示第一个任务的持续时间。

const ReportsPage: React.FC<Props> = (props): React.ReactElement => {
  const [totalDuration, setTotalDuration] = useState(0);
  useEffect(() => {
    for (let i = 0; i < props.projects.length; i++) {
      for (let j = 0; i < props.projects[i].tasks.length; i++) {
        setTotalDuration(totalDuration + props.projects[i].tasks[j].totalDurationInSeconds);
      }
    }
  }, [])

  return (
    <div>
  <p>Total time spent across all projects : {totalDuration}</p>
    </div>
  );
};

我的组件已连接到ReduxStore,并且Props的类型为StateProps & ReportsPageProps

2 个答案:

答案 0 :(得分:1)

您的内部循环条件和增量使用i代替j

这就是您想要的:

for (let i = 0; i < props.projects.length; i++) {
      for (let j = 0; j < props.projects[i].tasks.length; j++) {
        setTotalDuration(totalDuration + props.projects[i].tasks[j].totalDurationInSeconds);
      }
}

答案 1 :(得分:1)

在使用useEffect函数而没有任何依赖关系时,它会执行一次,但是您希望totalDuration在添加任何任务时将更新。

   useEffect(() => {
        for (let i = 0; i < props.projects.length; i++) {
          for (let j = 0; j < props.projects[i].tasks.length; j++) {
            setTotalDuration(totalDuration + props.projects[i].tasks[j].totalDurationInSeconds);
          }
        }
      }, [props.projects])