javascript - React 和 Firebase - 如何根据属性值进行计数

Question

我正在尝试计算已完成的任务。我正在获取整个数据，因为我也在渲染它。在 componentDidMount 之后，我将所有数据存储在状态对象中，如下所示:

componentDidMount 看起来像这样:

  componentDidMount () {
    const dataGoalRef = dbRef.child('goals/'+this.state.uid+'/'+this.state.currentGoalId);
    dataGoalRef.on('value', snap => {
        this.setState({
          dataGoal: snap.val(),
          currentGoalId: this.props.match.params.goalId,
        });
    });
  }

我已经在使用 {this.state.allTask​​sCount++} 计算任务数，但每次组件渲染时它都会触发。

render() {
    return(
      <div>
        <main className="content">
          <p>{this.state.dataGoal.description}</p><br /><br />


            { this.state.dataGoal.milestones &&
              Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) => {
              const milestonesData = this.state.dataGoal.milestones[milestoneKey];
              console.log(this.doneTasksFromDataGoal());

              return <div className="milestone-wrap" key={milestoneKey}>
                       <label className="milestone-label truncate">{milestonesData.name}</label>

                       {Object.keys(milestonesData.tasks)
                         .filter( (taskKey, index) => {
                           {this.state.allTasksCount++}
                           return milestonesData.tasks[taskKey].done === false;
                         })
                         .map( (taskKey) => {

                           {this.state.todoTasksCount++}
                           return <div className="task clearfix" key={taskKey}>

                                       <input
                                         className="checkbox-rounded"
                                         name="done"
                                         type="checkbox"
                                         checked={milestonesData.tasks[taskKey].done}
                                         onChange={(e) => this.handleInputChange(e, milestoneKey, taskKey)} />
                                       <div className="task-content">
                                         <p className="task-name truncate">{milestonesData.tasks[taskKey].name}</p>
                                         <p className="task-date">{milestonesData.tasks[taskKey].finishDate}</p>
                                       </div>
                                  </div>

                         })}

                     </div>

            })}

        </main>
      </div>
    );
  }

获取已完成或未完成任务的数量并将其保持在状态的最佳方法是什么？

Answer 1

这是一个非常冗长的解决方案，用于迭代里程碑和任务并在 render() 函数内增加一个计数器:

render() {
    var doneCount = 0;
    var milestones = this.state.dataGoal.milestones;

    Object.keys(milestones).forEach(function(milestoneKey) {
        Object.keys(milestones[milestoneKey].tasks).forEach(function(taskKey) {
            if (milestones[milestoneKey].tasks[taskKey].done) {
                doneCount += 1;
            }
        });
    });

    return (
        <div>Done: {doneCount}</div>
    );
}