[英]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.