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

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

Answer 2

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

如果您需要详细说明，请发表评论。

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

2 个答案: