Блог

В настоящее время я работаю над калькулятором в react с машинописным текстом, но у меня возникли некоторые проблемы с вводом состояния в моей функции редуктора. Пока работает только «любой». Я знаю, что это объект со строками внутри, но я не знаю, почему это не работает.

Спасибо за вашу помощь.

 import { useReducer } from "react"; import Grid from "./components/Grid"; import NumberButton from "./components/NumberButton"; import OperatorButton from "./components/OperatorButton";  // type State = { // currentOperation?: string // result?: string // operator?: string // }  export enum ACTIONS {  ADD_NUMBER = 'add-number',  ADD_OPERATOR = 'add-operator',  CALCULATE = 'calculate',  DELETE = 'delete',  RESET = 'reset' }  export type Action = {  type: ACTIONS,  payload?: { digit?: string, operator?: string } }  const reducer = (state: any, { type, payload }: Action) =gt; {   console.log("State", state);   switch (type) {  case ACTIONS.ADD_NUMBER:  return {  ...state,  currentOperation: `${state.currentOperation || ""}${payload!.digit}`  };     default:  break;  } };  const App = () =gt; {   const [{ currentOperation, result, operator }, dispatch] = useReducer(reducer, {});   return (  lt;Gridgt;  lt;div className="displayScreen"gt;  lt;div className="currentOperation"gt;{currentOperation} {operator}lt;/divgt;  lt;div className="result"gt;{result}lt;/divgt;  lt;/divgt;  lt;button onClick={() =gt; dispatch({ type: ACTIONS.RESET })}gt;Clt;/buttongt;  lt;/Gridgt;  ) }  export default App;   

Ваше заявление о переключении не является исчерпывающим. В случае по умолчанию вы ничего не возвращаете.

измените функцию редуктора следующим образом:

 const reducer = (state: State, { type, payload }: Action) =gt; {  

и затем:

 default:   return state;  

Это должно сработать.

Еще один способ ввода действий без перечислений:

 type State = {  currentOperation?: string  result?: string  operator?: string } export type Action =   | { type: 'ADD_NUMBER', payload: {digit: number} }  | { type: 'ADD_OPERATOR', payload: string};  const reducer = (state: State, action: Action) =gt; {  console.log("State", state);  switch (action.type) {  case 'ADD_NUMBER':  return {  ...state,  currentOperation: `${state.currentOperation || ""}${action.payload.digit}`  };  case 'ADD_OPERATOR':  return {  ...state,  // (payload here is a string)  }    default:  return state;  } };