React 計算器不適用於多個數字

Question

嗨，我是編程新手

我嘗試通過一個簡單的項目來練習編程：計算器

它工作正常但問題是當我在 3 之后按 3 它只顯示 3 而不是 33

我該如何處理？

我的 app.js 文件：

import React, { useState , useEffect, useRef} from "react";
import { add, subtract, multiply, divide } from "../functions.js";
import "../styles.css";

function App() {
    const [num, setNum] = useState(0);
    const [symbol, setSymbol] = useState("");
    const symbols = ["+", "-", "*", "/"];
    const numbers = [];


    function setButton(event) {
        if (Number(prevCount) !== 0 && symbol == "") {
            const number = numbers.join("");
            setNum(number);
        } else {
            setNum(event.target.name);
            numbers.push(event.target.name);
        }
    }

    function usePrevious(value) {
        // The ref object is a generic container whose current property is mutable ...
        // ... and can hold any value, similar to an instance property on a class
        const ref = useRef();
        // Store current value in ref
        useEffect(() => {
            ref.current = value;
        }, [value]); // Only re-run if value changes
        // Return previous value (happens before update in useEffect above)
        return ref.current;
    }

    const prevCount = usePrevious(num);
    
    function EqualTo() {

        let number = 0;

        switch (symbol) {
            case "+":
                number = add(Number(prevCount), Number(num))
                break;
            case "-":
                number = subtract(Number(prevCount), Number(num));
                break;
            case "*":
                number = multiply(Number(prevCount), Number(num));
                break;
            case "/":
                number = divide(Number(prevCount), Number(num));
                break;
        }

        setNum(number);
        setSymbol("");
    }

    function ac() {
        setNum(0);
        setSymbol("");
        numbers = [];
    }

    function symbolF(event) {
        setSymbol(event.target.name)
       
        let number = 0;

        if (prevCount == 0) {
            return
        } else if (prevCount != 0) {
            switch (symbol) {
                case "+":
                    number = Number(num) + Number(prevCount);
                    setNum(number);
                    break;
                case "-":
                    number = Number(prevCount) - Number(num);
                    setNum(number);
                    break;
                case "*":
                    number = Number(prevCount) * Number(num);
                    setNum(number);
                    break;
                case "/":
                    number = Number(prevCount) / Number(num);
                    setNum(number);
            }
        } else if (prevCount !== 0 && !(symbol in symbols)) {
            const newNum = prevCount + num;
            setNum(newNum)
        }
    }

    function forInpute(event) {
        setNum(event.target.value);    
    }

    return (
        <div>
            <br />
            <input type="number" placeholder="Enter num" value={num} onChange={forInpute}></input>
            <br />
            <button onClick={setButton} name="1">1</button>
            <span><button name="2" onClick={setButton}>2</button></span>
            <span><button name="3" onClick={setButton}>3</button></span>
            <span><button name="+" onClick={symbolF}>+</button></span>
            <br />
            <button name="4" onClick={setButton}>4</button>
            <span><button name="5" onClick={setButton}>5</button></span>
            <span><button name="6" onClick={setButton}>6</button></span>
            <span><button name="-" onClick={symbolF}>-</button></span>
            <br />
            <button name="7" onClick={setButton}>7</button>
            <span><button name="8" onClick={setButton}>8</button></span>
            <span><button name="9" onClick={setButton}>9</button></span>
            <span><button name="*" onClick={symbolF}>*</button></span>
            <br />
            <span><button name="0" onClick={setButton}>0</button></span>
            <span><button name="." onClick={setButton}>.</button></span>
            <span><button name="/" onClick={symbolF}>/</button></span>
            <br />

            <button onClick={EqualTo}>=</button>
            <br />

            <button onClick={ac}>AC</button>
        </div>
    );
}

export default App;

function setButton(event) {
        if (Number(prevCount) !== 0 && symbol == "") {
            const number = numbers.join("");
            setNum(number);
        } else {
            setNum(event.target.name);
            numbers.push(event.target.name);
        }
    }

我嘗試執行此操作，但條件似乎也不起作用

我想數字中另一個數字的條件是符號不等於算術問題所以我什至實現了它但它似乎不起作用請幫助我！

Answer 1

將輸入作為字符串並進行字符串連接。 它是這樣的

let text1 = "2";
let text2 = "3";
let result = text1.concat(text2);
result will be "23"

在執行將字符串轉換為數字的操作之前使用 parseInt。

let a = "100";
let b = parseInt(a);
result will be 100 (integer)

使用num.toString()將 output 值轉換為字符串。