Estoy desestructurando la variable del estado React en render() de mi componente de clase de esta manera:
let { indexTabPoints } = this.state;Después de eso, estoy cambiando su valor:
if (condition) { indexTabPoints += 1; console.log(indexTabPoints); // value's changing as it should }Y luego estoy pasando indexTabPoints como apoyo a otro componente:
<PointTab activeIndex={indexTabPoints} .... />Luego, verifico el valor de activeIndex en el componente PointTab y veo un valor antiguo (sin ningún cambio).
Me parece que React no actualiza la propiedad que estoy pasando al componente PointTab, ya sea que cambie o no. ¿Por qué sucede esto y cómo evitarlo, utilizando la desestructuración?
Editado: acabo de notar que tengo varios componentes secundarios y el otro (en otro lugar) me decía que el valor es antiguo (porque el valor no cambió). Gracias a todos por la ayuda, perdonen mi descuido.
Los accesorios son inmutables
Y no puede actualizar el estado como indexTabPoints += 1; , en su lugar, puede hacer this.setState((prev) =>({indexTabPoints: prev+1}))
Puede probar esto (pero solo para depurar):
if (condition) { indexTabPoints += 1; setTimeout(() => console.log(indexTabPoints), 1000); }ejemplo de depuración para comprender si el componente se llama antes de la condición if:
if (condition) { indexTabPoints += 1; console.log("in if condition" + indexTabPoints); } render(){ return( { console.log(" in render" + indexTabPoints) } <PointTab activeIndex={indexTabPoints} .... />); }