React待办应用如何统计state中未完成任务数并实时更新到页面

实现方法 #

因为你当前使用的是React类组件，state更新后会自动触发组件重渲染，直接在渲染逻辑中实时计算未完成任务数即可，无需额外维护单独的状态，也能保证数值和state完全同步。

直接在JSX中计算

直接在你要渲染的位置嵌入统计逻辑即可，用数组filter方法筛选出未完成（第二个元素为false）的任务，取结果的长度即可：

<div className="todo-app__total">{this.state.tasks.filter(task => !task[1]).length} Left</div>

抽成复用计算属性

如果多个位置需要用到这个数值，可以把统计逻辑抽成类的 getter 方法，减少重复代码：

// 在类组件内部定义
get unfinishedTaskCount() {
  return this.state.tasks.filter(task => !task[1]).length
}

// 渲染时直接调用
render() {
  return (
    {/* 其他渲染逻辑 */}
    <div className="todo-app__total">{this.unfinishedTaskCount} Left</div>
  )
}

说明 #

待办场景下任务量级很小，每次重渲染时的计算开销可以完全忽略。如果后续任务量极大，可以考虑在state.tasks更新时提前计算好数值存在state里，但普通场景下直接实时计算是最简洁也最不容易出同步问题的方案。

内容的提问来源于stack exchange，提问作者jerry