0
148
Viewspresent : past[past.length - 1] , esto debería devolver un solo valor pero está devolviendo una matriz completa como lo hace el método de corte
import React, { useState, useRef, useReducer } from "react"; import "./App.css"; function reducer(state,action){ const {past,present,future} = state switch(action.type){ case 'ADD' : return { past : [...past,present], present : [...present,{id : Math.random(),name : action.payload}], future : [], canUndo : true, canRedo : false, } case "UNDO" : if(!state.canUndo) return state; return { present :past[past.length - 1], past : past.slice(0,-1), future : [present,...future], canUndo : past.length > 1, canRede : true } case 'REDO' : return { } default: return state; } } function App(){ const input = useRef(); const initialState = { present : [], past : [], future : [], canUndo : false, canRedo : false, } const[items,dispatch] = useReducer(reducer,initialState); const addItem = (e) => { e.preventDefault(); dispatch({type : 'ADD', payload : input.current.value}) input.current.value = ''; } return( <div> <h1>Shopping list</h1> <form className='add-product' onSubmit={addItem}> <label htmlFOR='product'>product</label> <input ref={input} type='text' id='product'/> <button type='submit'>Add</button> </form> <div className='actions'> <button onClick={() => dispatch({type : 'UNDO'})}>Undo</button> <button onClick={() => dispatch({type : 'REDO'})}>Redo</button> </div><ul> {items.present.map(item => <li key={item.id}>{item.name}</li>)} </ul> </div> ) } export default App;Hola a todos, estoy teniendo dificultades para entender este concepto.
presente : pasado[pasado.longitud - 1]
Entonces, después de agregar un valor, esto debería devolver un solo valor cuando hago clic en el botón Deshacer, pero está devolviendo una matriz completa excepto la última, si alguien explica este concepto, estaré muy agradecido, ¿por qué se comporta como método de división?
1 answers
Answer question0
Si entiendo su publicación, está preguntando por qué past[past.length - 1] devuelve una matriz en lugar de un valor único.
La razón de esto es porque está devolviendo un solo valor, el último elemento de la matriz past , y este valor también es una matriz. En otras palabras, su estado, es decir, el present , es una matriz de valores y está manteniendo pilas de "deshacer" y "rehacer". Cuando se agrega un nuevo elemento a la matriz present , la matriz present anterior se agrega ( PUSHED ) a la pila de deshacer past . Cuando deshace esto, está eliminando el último elemento ( POPPED ) de la pila de deshacer past y reemplazando la matriz actual present .
Ejemplo:
Estado inicial:
past: [] present: [] future: [] AGREGAR 1: el presente se empuja al pasado ( [].push([]) -> [[]] ), 1 se empuja al presente ( [].push(1) -> [1] )
past: [[]] present: [1] future: [] AÑADIR 2: el presente pasa al pasado ( [[]].push([1]) -> [[], [1]] ), 2 pasa al presente ( [1].push(2) -> [1, 2] )
past: [[], [1]] present: [1, 2] future: [] DESHACER: el presente se empuja hacia el futuro ( [].push([1, 2]) -> [[1, 2]] ), el pasado se extrae ( [[], [1]].pop() -> [[]] ) y establecer como presente ( [1] )
past: [[]] present: [1] future: [[1, 2]] AGREGAR 3: el presente pasa al pasado ( [[]].push([1]) -> [[], [1]] ), 3 pasa al presente ( [1].push(3) -> [1, 3] ), el futuro se borra ( [] )
past: [[], [1]] present: [1, 3] future: [] AÑADIR 4: el presente pasa al pasado ( [[], [1]].push([1, 3]) -> [[], [1], [1, 3]] ), el 4 pasa al presente ( [1, 3].push(4) -> [1, 3, 4] )
past: [[], [1], [1, 3]] present: [1, 3, 4] future: [] Tenga en cuenta que cualquier entrada de elemento en matrices past o future ( pilas ) es una matriz.
