React Todo应用进度条返回NaN 无法正确传递任务统计参数问题

• 1. App组件状态定义错误
     useState返回值为[状态变量, 更新状态的方法]，你当前的写法将numberOfTasks的更新方法错误命名为tasksCompleted，实际上并没有单独存储任务完成数的状态，且这两个值完全可以从tasks数组派生，不需要单独维护状态。
• 2. Daily组件违规修改Props
     React中Props是只读属性，你在updateProgressHandler中直接对传入的numberOfTasks、tasksCompleted赋值，仅会修改当前函数作用域内的临时变量，不会触发组件重渲染。函数内打印的是修改后的临时值所以看起来正常，但组件渲染时读取的还是初始传入的错误值。
• 3. 完成率计算逻辑错误
     你使用的公式numberOfTasks / tasksCompleted * 10存在两个问题：一是分子分母写反，二是当无完成任务时tasksCompleted为0，除以0会直接返回NaN。

1. 修正App组件代码 #

删除冗余的状态定义，仅向Daily组件传入tasks参数即可：

function App() {
    const [inputText, setInputText] = useState("");
    const [tasks, setTasks] = useState([]);
    
    // 其他逻辑保持不变，渲染Daily时仅传tasks
    return (
        {/* 其他组件 */}
        <Daily tasks={tasks} />
    )
}

2. 重构Daily组件代码 #

删除冗余的useEffect和Props修改逻辑，直接在渲染时计算进度，同时处理边界情况：

const Daily = ({ tasks }) => {
    const numberOfTasks = tasks.length;
    const tasksCompleted = tasks.filter(task => task.completed).length;
    // 总数为0时进度默认0，否则按完成占比计算，保留整数
    const completed = numberOfTasks === 0 ? 0 : Math.round((tasksCompleted / numberOfTasks) * 100);

    return (
        <div className="row">
                <div className="col">
                    <div className="progress progress-daily" style={{ height: "38px" }}>
                        <div
                            className="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar"
                            aria-valuenow={tasksCompleted}
                            aria-valuemin="0"
                            aria-valuemax={numberOfTasks}
                            style={{width: `${completed}%`}}
                        >
                            {completed}%
                        </div>
                    </div>
                </div>
                <div className="col-1">
                    <button className="btn btn-success">Done</button>
                </div>
        </div>
    )
}

export default Daily;

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