即使我正在复制数组,我的 useState 数组也不会使用传播方法更新

问题描述 投票:0回答:0
 export default function Calculator(props){
    const [userInput, setUserInput] = useState('')
    const [operator,setOperator]= useState('')
    const [equationNumbers,setEquationNumbers] = useState([])
    const [result, setResult]= useState(0)

    /* updating the input field as soon as user type anything */
    function handleOnChange(e){ 
        if(isNaN(e.target.value)){
            document.getElementById('Calculator-input-field').placeholder='sorry, you can only type numbers';
            clearAllData()
        }else{
            setUserInput(e.target.value)
            document.getElementById('Calculator-input-field').placeholder='Enter the number';
        }
    }       
    /* clear all the data */
    function clearAllData(){
        setEquationNumbers([])
        setOperator('')
        setUserInput('')
    }
    /** Handle error functions */
    /** handle pressing on operation and the input field is clear */
    function repeatPressingOperation(ErrorMessage){
        let ErrorSpan =  document.getElementById('error');
        try{
            if(userInput === ''){clearAllData(); throw ErrorMessage}; 
        }catch(err){
            ErrorSpan.innerHTML = err;
        };
    }    
    /* doing the operation + - * / to the result array element  */
    function Calculate(operator){
        /* if user want to do add operation */
        if (operator === '+'){
            setResult(equationNumbers[0] + equationNumbers[1])
            setUserInput(result)
        }
    }
    /* handle operation either on keyBoard or calculator bad */
    function handleAddingOperation(e){
        e.preventDefault()
        repeatPressingOperation('if you want possitive number, use plaeas the switch button')
        setOperator('+')
        // equationNumbers.push(Number(userInput))
        let NewNum = [Number(userInput)]
        setEquationNumbers(NewNum)
        console.log(NewNum)
        setUserInput('')
    }

    function handlePressingEnterKeyOrEquallButton(e){
        e.preventDefault()
        repeatPressingOperation('you did not enter any number please try again')
        let NewNum = [
            ...equationNumbers,
            Number(userInput)
        ]
        setEquationNumbers([
            ...NewNum,
            Number(userInput)
        ])
        setUserInput('') 
        console.log(NewNum)
        console.log(equationNumbers)
        Calculate(operator)
        clearAllData()     
    }

    /* handle the user input inside the input field and doing operations such:+, - , /.*/
    function handleKeyDown(e){
        if(e.key === '+'){
            handleAddingOperation(e)
        }    
        else if(e.key === 'Enter'){
            handlePressingEnterKeyOrEquallButton(e)
        }       
    }

我尝试使用 NewNum 数组“equationNumbers 的副本”然后使用 ... 方法更新 equationNumbers 状态,但是当我使用 console.log 时。当它应该有两个“用户按+时的第一个输入和按回车键时的第二个用户输入”时,它只显示一个索引“userinput”。所以我是通过推送方法来做的,但我知道这不好,因为它会改变状态。

reactjs react-native react-hooks mutate
© www.soinside.com 2019 - 2024. All rights reserved.