0
318
VistasRecibo un error después de implementar el gancho useStack. error: (la pila no está definida)
Tengo una matriz cuyos valores se convierten en botones. Al hacer clic sobre cada uno de los botones, su valor se escribe en la lista ul. Y cuando haga clic en 'Pop', el último valor se eliminará.
Rendimiento esperado:
Yo uso from useStack hook para implementarlo. Pero después de ejecutar, el resultado es una página en blanco y recibo este error en la consola:
Uncaught TypeError: stack is undefinedcomponentes.js:
import React from 'react'; import {useStack} from './hooks' export function Demo() { return ( <div className="demo"> <StackDemo/> </div> ); } const words = ['Apple', 'Banana', 'Cherry', 'Grape']; function StackDemo() { const {stack, push, pop} = useStack(); return (<div> {words.map((word, index) => <button key={index} onClick={() => push(word)}>{word}</button>)} <button onClick={pop}>» Pop</button> <ul> {stack.map((item, index) => <li key={index}>{item}</li>)} </ul> </div>); }ganchos.js:
import {useState} from 'react'; export function useStack() { const [array,setArray] = useState([]); const add = (value) => { return setArray(array.push(value)); } const del = () => { return setArray(array.pop()); } return {array, add, del}; }Por supuesto, si edito components.js:
// const {apilar, empujar, sacar} = usarStack(); a // const [apilar, empujar, sacar] = useStack();
Y edite hooks.js:
// devuelve {array, add, del} a // devuelve [array, add, del]
Luego se muestra la salida: 
Pero cuando hago clic en uno de ellos, la salida se convierte en una página en blanco y recibo este error en la consola:
Uncaught TypeError: stack.map is not a function¿Cuál es el problema? ¿Cómo debo asignar la salida useStack a const {stack, push, pop} ?
Gracias por cualquier ayuda.
1 Respuestas
Responde la pregunta0
Hay varios problemas con el gancho useStack :
- Su función de
add:
const add = (value) => { return setArray(array.push(value)); } array.push devuelve un número (la longitud de la nueva matriz), no la matriz después de agregar el nuevo elemento. Esto provoca la página blanca (causada por un TypeError de JavaScript, porque ahora la stack ya no es una matriz).
Para solucionar esto, sugeriría:
const add = (value) => { return setArray(array.concat(value)); }- Su función
del:
const del = () => { return setArray(array.pop()); } En este caso, array.pop devuelve el valor que acaba de aparecer, por lo que ahora stack es una cadena en lugar de una matriz.
Para solucionar esto, sugeriría:
const del = () => { return setArray(array.slice(1)); }Aquí hay un ejemplo de trabajo: https://codesandbox.io/s/brave-neumann-41ltx?file=/src/App.js .