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.allTasksCount++} 计算了任务，但每次渲染组件时它都会触发。

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

尝试 componentWillRecieveProps。安装完成后，只要道具发生变化，它就会被调用。您还可以在这里比较上一个和下一个道具。 这是调用 setState 的首选位置，您可以使用它更新完成计数器。

如需详细说明请留言

Answer 2

这是一个非常冗长的解决方案，用于迭代里程碑和任务并在 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>
    );
}