React 計算器，它使用 userReducer 鈎子進行操作，不工作。 數字不顯示

Question

我正在使用 React 中的 useReducer 鈎子制作一個計算器。 我制作了 useReducer 鈎子來執行所有操作，計算器鍵盤上的數字/操作按鈕被調用 reducer 的組件替換。 我假設語法中某處存在錯誤，因為在按下按鈕時，計算器顯示屏上沒有顯示任何數字或操作符號。 正在渲染按鈕組件。

The reducer Function --->

 import React , {useReducer ,useState}from "react";
import ButtonDigit from "./ButtonDigit";
import ButtonOperation from "./ButtonOperation";
import "./style.css"

export const ACTIONS = {
  ADD_DIGIT : 'add-digit',
  DELETE_DIGIT: 'delete-digit',
  CLEAR: 'clear',
  CHOOSE_OPERATION: 'choose-operation',
  EVALUATION: 'evaluation'
}

function reducer (state, action) { 
   switch(action.type){
    case ACTIONS.ADD_DIGIT: 
      return {...state, currentOperand: `${state.currentOperand || ""}${action.payload}`}  
    case ACTIONS.DELETE_DIGIT:
      return state
    case ACTIONS.CLEAR:
      return {currentOperand: 0}
    case ACTIONS.CHOOSE_OPERATION:
      return state
    case ACTIONS.EVALUATION:
      return state
    default:
      return state
   }
}
export default function App() {
  const [{prevOperand=null, currentOperand =0, operation=null}, dispatch] = useReducer(reducer,{})
  // console.log("Rendered!")
  // dispatch({payload:})
  return (
    <div className="calculator-grid">
      <div className="output">
        <div className="prev-operand">{prevOperand} {operation}</div>
        <div className="current-operand">{currentOperand}</div>
      </div>
        <button className="span-two">AC</button>
        <button>DEL</button>
        <ButtonOperation operation={'/'} dispatch={dispatch}/>
        <ButtonDigit number="1" dispatch={dispatch}/>
        <ButtonDigit number="2" dispatch={dispatch}/>
        <ButtonDigit number="3" dispatch={dispatch}/>
        <ButtonOperation operation={'*'} dispatch={dispatch}/>
        <ButtonDigit number="4" dispatch={dispatch}/>
        <ButtonDigit number="5" dispatch={dispatch}/>
        <ButtonDigit number="6" dispatch={dispatch}/>
        <ButtonOperation operation={'+'} dispatch={dispatch}/>
        <ButtonDigit number="7" dispatch={dispatch}/>
        <ButtonDigit number="8" dispatch={dispatch}/>
        <ButtonDigit number="9" dispatch={dispatch}/>
        <ButtonOperation operation={'-'} dispatch={dispatch}/>
        <ButtonOperation operation={'.'} dispatch={dispatch}/>
        <ButtonDigit number="0" dispatch={dispatch}/>
        <button className="span-two">=</button>
        {/* <ButtonOperation className="span-two" operation={'='} dispatch={dispatch}/>      */}
    </div>
  );
}


The <ButtonDigit/> Component ----->

import React from 'react'
import ACTIONS from './App'

export default function ButtonDigit({number,dispatch}) {

  // console.log(number)
  return (
    <>
      <button onClick={() => dispatch({type:ACTIONS.ADD_DIGIT , payload:number})}
       >{number}</button>
    </>
  
  )
}
</code>```

[GitHub Link](https://github.com/KS-E/Calculator_useReducer)

The reducer function: 

(https://i.stack.imgur.com/vdetz.jpg)

The buttons and the props being passed :

(https://i.stack.imgur.com/Tb5oZ.jpg)

The button component:

(https://i.stack.imgur.com/hx54t.jpg)



I seemingly have a good understanding of how the useReducer hook works, however, I am unable to see where the mistake is, in the basic commands that I have used. Can someone please check? I am assuming I have made a mistake in the syntax of the props while passing them (or) while calling the reducer function via dispatch.

IMPORTANT NOTE: The code above is incomplete since I am stuck in the very first step itself (display of the digits on the display panel). Please check the ACTIONS.ADD_DIGIT and the corresponding commands. 

Answer 1

ACTIONS.CHOOSE_OPERATION現在什么都不做。 所以當你按下一個操作時，什么也沒有發生。 所以我認為你應該更新這個案例

Answer 2

檢查后，我發現問題出在 import ACTIONS from './App' 語句上。 這可能是循環導入的問題，這導致在按鈕組件中使用值 ACTIONS.ADD_DIGIT 時未定義。 解決方案是將 ACTIONS 枚舉移動到不同的文件。