Question

我是 Web 开发和 React 的新手，我正在构建一个计算器应用程序。

我遇到了 useState 没有立即更新的问题，也不太确定如何使其工作。也不太确定这是否是最好的方法。

import { useState } from 'react';
import { evaluate } from 'mathjs'

const OnClickHandler = () => {

    const [result, setResult] = useState('');

    const clearResult = () => {
        setResult('');
    }

    function calcualte(calc) {
        if (result !== '') {
            setResult(evaluate(calc));
        }
    }

   /*********** Main logic ***************/
   const onClickHandle = (btnText,btnType) => {
     switch (btnType)
        {
            case 'clear':  // AC button
                clearResult();
                break;
            case 'number':  //numerical button
                setResult(result.concat(btnText));
                break;
            case 'delete':  //DEL button
                setResult(result.slice(0, -1));
                break;
         case 'calculate':  //= button
                calcualte(result);
                break;
         case 'operation':  // +, -, * or ÷ 
            console.log(result); 
                 setResult(result.concat(btnText));
                break;
        }  
   }
      return { result, onClickHandle }  
}
export default OnClickHandler

如果只执行一个计算，例如 2+2 后跟 = 并且结果更改为 4，则效果很好。但是，如果我再次按 + 添加到结果中，则会出现错误

TypeError: result.concat is not a function

如果再次按下 =，useState 将更改为 4，但如果尝试根据之前的结果执行另一个操作，我仍然会遇到相同的错误。

任何建议将不胜感激

如何在反应中立即更新 useState

0 个答案: