我是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
。
答案 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])