Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

213
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda