Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

215
Vistas
Reaccionar: ¿por qué mis componentes no se vuelven a renderizar cuando están controlados por un estado de matriz?

Tengo un montón de botones en mi aplicación y cambio su className cuando se hace clic en ellos ("myButton" o "activeMyButton"). Cada vez que hago clic en un botón no activo, no se vuelve a procesar. Pero cuando hago clic en un botón activo, se vuelve a renderizar (y si antes hice clic en botones no activos, se vuelven a renderizar con este). No tiene ningún sentido para mí. Aquí está mi código: el componente del botón

 export default function MyButton({ buttonFunction, buttonParameter, activeButton, }) { return ( <button className={activeButton ? "myButton activeMyButton" : "myButton"} onClick={() => { buttonFunction(buttonParameter); }} > {buttonParameter} </button> ); }

Y aquí está el componente principal:

 export default function Mathoperators() { const [activeOperators, setActiveOperators] = useState(["+"]); const handlingOperators = (operatorInput) => { let stockOperators = activeOperators; if ( stockOperators.length > 0 && stockOperators.some((operator) => { return operator === operatorInput; }) ) { stockOperators = stockOperators.filter((operator) => { return operator !== operatorInput; }); setActiveOperators(stockOperators); } else { stockOperators.push(operatorInput); setActiveOperators(stockOperators); } }; const handlingOperatorButtonClass = (operatorInput) => { return activeOperators.some((operator) => { return operator === operatorInput; }); }; return ( <section className="optionsContainer"> <MyButton buttonParameter={!mathPlus} buttonFunction={setMathPlus} activeButton={mathPlus} /> <MyButton buttonParameter="−" buttonFunction={handlingOperators} activeButton={handlingOperatorButtonClass("−")} /> <MyButton buttonParameter="×" buttonFunction={handlingOperators} activeButton={handlingOperatorButtonClass("×")} /> <MyButton buttonParameter="÷" buttonFunction={handlingOperators} activeButton={handlingOperatorButtonClass("÷")} /> </section> ); }

Si cambio de este estado de matriz a cuatro estados booleanos, todo funciona bien. Pero me gustaría saber si estoy haciendo algo mal con esta versión. Gracias !

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Cuando escribe let stockOperators = activeOperators , no está creando una nueva matriz, solo está creando una variable que apunta al estado de activeOperators . Por lo tanto stockOperators.push(operatorInput) en realidad muta su estado directamente y eso crea este comportamiento extraño que está viendo.

let stockOperators = [...activeOperators] debería solucionarlo!

about 4 years ago · Juan Pablo Isaza Denunciar

0

cámbielo para let stockOperators = [...activeOperators];

esto sucedió porque cuando let stockOperators = activeOperators;

copiará la referencia al valor y lo cambiará, lo que significa que cambia el inicio en sí mismo, de modo que cuando lo coloque en setState, parecerá que nunca se ha cambiado

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda