La visualización de la función de mapa se actualiza solo con el cambio de entrada. ¿Alguien puede explicar por qué?
Aunque estoy usandoEffect refrescando la página en el cambio de pila. No funciona. solo el cambio de campo de entrada está actualizando la pantalla.
import React, { useState, useEffect } from "react"; export default function App() { const [stack, setStack] = useState([]); const [values, setvalues] = useState(""); useEffect(() => { console.log("Refeshed"); }, [stack]); return ( <div className="App"> <div className="app-left"> <input className="stack-input" placeholder="Element" value={values} onChange={(e) => { setvalues(e.target.value); }} /> <button className="push-btn" onClick={() => { stack.push(values); }} > Push </button> <button className="pop-btn" onClick={() => { stack.pop(); }} > Pop </button> </div> <ul className="app-right"> {stack.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); }Debe llamar a setStack al click y usar prevState para actualizar los valores. Llamar a setStack con let useEffect para reconocer el cambio de estado y volver a renderizar el componente
setStack(oldStack => [...oldStack, values]); // adding (.push)Hacer estallar
setItems(oldStack => oldStack.slice(0, -1)); // removes last elementEsto se debe a que React usa una comparación superficial cuando cambia el estado para tomar la decisión de volver a renderizar o no. Siempre actualizó la matriz existente y eso evita volver a renderizar. Debe crear una nueva matriz para cada operación (push o pop).
Seguir también funcionaría
const { useEffect, useState } = React; function App() { const [stack, setStack] = useState([]); const [values, setvalues] = useState(""); useEffect(() => { // console.log("Refeshed"); }, [stack]); const push = (value) => { setStack((prevStack) => [...prevStack, value]); }; const pop = () => { setStack((prevStack) => prevStack.slice(0, prevStack.length - 1)); }; return ( <div className="App"> <div className="app-left"> <input className="stack-input" placeholder="Element" value={values} onChange={(e) => { setvalues(e.target.value); }} /> <button className="push-btn" onClick={() => { push(values); }} > Push </button> <button className="pop-btn" onClick={() => { pop(); }} > Pop </button> </div> <ul className="app-right"> {stack.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> </div> ); } ReactDOM.render(<App/>, document.getElementById("root")) <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>