简体   繁体   English

React 计算器,它使用 userReducer 钩子进行操作,不工作。 数字不显示

[英]React calculator, which uses userReducer hook for operation, not working. Numbers not displaying

I am making a calculator using the useReducer hook in React.我正在使用 React 中的 useReducer 钩子制作一个计算器。 I have made the useReducer hook to carry out all the operations, and the digit /operation buttons, on the calculator keyboard, are replaced by components which call the reducer.我制作了 useReducer 钩子来执行所有操作,计算器键盘上的数字/操作按钮被调用 reducer 的组件替换。 I am assuming there is a mistake somewhere in the syntax, as on pressing the buttons, no digits or operation symbols are showing up in the calculator display.我假设语法中某处存在错误,因为在按下按钮时,计算器显示屏上没有显示任何数字或操作符号。 The button component is getting rendered.正在渲染按钮组件。


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. 

ACTIONS.CHOOSE_OPERATION is doing nothing now. ACTIONS.CHOOSE_OPERATION现在什么都不做。 So when you press an operation, nothing happened.所以当你按下一个操作时,什么也没有发生。 So I think you should update this case所以我认为你应该更新这个案例

After checking, I found that the issue is with the import ACTIONS from './App' statement.检查后,我发现问题出在 import ACTIONS from './App' 语句上。 It is likely a problem with a circular import, which is causing the value ACTIONS.ADD_DIGIT to be undefined when it is used in the button component.这可能是循环导入的问题,这导致在按钮组件中使用值 ACTIONS.ADD_DIGIT 时未定义。 The solution is to move the ACTIONS enum to a different file.解决方案是将 ACTIONS 枚举移动到不同的文件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM