在React中实现阶乘功能时输入0、1、2无正确结果问题求助

问题排查与修复 #

存在的问题 #

• 类型不匹配：输入框返回的值是字符串类型，直接用===和数字0、1做全等比较永远返回false，导致对应分支逻辑不触发
• 变量取值时机错误：fatorial和primeiroMultipicador定义在组件顶层，只会在组件渲染时更新，调用calcular函数时拿到的是上一次渲染的旧值，不是最新的输入值
• 分支逻辑缺失：所有条件判断都是独立的if，没有提前终止逻辑，就算前面的条件命中，后面的逻辑也会做无效判断
• 边界情况未覆盖：当输入为2时，primeiroMultipicador为1，for循环的i>1条件不成立，循环完全不执行，没有给resultado赋值，所以页面无结果

修复后完整代码 #

import React, {useState} from 'react';   

function Calculo_Do_Fatorial() {
    const [Dado, setdado] = useState('');
    const [resultado, setResultado] = useState();

    function calcular () {
        // 先把输入值转成数字类型
        const num = Number(Dado);
        // 校验输入合法性
        if (isNaN(num)) {
            setResultado('请输入合法数字');
            return;
        }
        if (num < 0) {
            setResultado('x的值必须大于等于0');
            return;
        }
        // 0和1的阶乘都是1
        if (num === 0 || num === 1) {
            setResultado(1);
            return;
        }
        // 计算阶乘的逻辑挪到函数内部，用最新的输入值计算
        let fatorial = num;
        for (let i = num - 1; i > 1; i--) {
            fatorial = fatorial * i;
        }
        setResultado(fatorial);
    }
  
    return (
        <div className='Calculo_Do_Fatorial'>
          <h1>阶乘计算</h1>
          <br></br>
          <div className="input">
            <label htmlFor="nome">输入数字 </label>
            <input 
                type="number"  
                required="required" 
                value={Dado} 
                onChange={(e)=> setdado(e.target.value)}
            />
          </div>  
          <button className="calcular1" id='calcular' onClick={calcular}>计算</button>
          <div className="result" id='resultado' >
              {typeof resultado === 'number' ? resultado.toFixed(5).replaceAll(".", ",") : resultado}
          </div>  
        </div>
    );
}

export default Calculo_Do_Fatorial

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