No entiendo el siguiente comportamiento:
He escrito un componente que básicamente debería actuar como un menú. Estoy usando MaterialUI para esto. Cuando se hace clic en un botón del menú, debe configurarse como "activo" y representarlo visualmente. Para esto, el valor "seleccionado" se establece en verdadero.
Si se hace clic en el botón ahora, el estado cambia, pero la lista no se representa de nuevo. ¿Qué estoy haciendo mal? ¿O voy por un camino fundamentalmente equivocado para lograr mi objetivo?
import * as React from 'react'; import {List, ListItemButton, ListItemText } from '@mui/material'; import { ListItem } from '@mui/material'; class Sidemenu extends React.Component { menu = []; constructor(props) { super(props); this.state = { active: 'home' } } changeActiveItem = (element) => { this.setState({ active: element }); this.render(); } buildMenu(active) { console.log(active); var buildMenu = ['home', 'stammdaten']; for (let index = 0; index < buildMenu.length; index++) { const element = buildMenu[index]; this.menu.push( <ListItem key={element}> <ListItemButton divider selected={element == active ? true : false} onClick={() => { this.changeActiveItem(element); console.log(this.state); }}> <ListItemText>{element}</ListItemText> </ListItemButton> </ListItem> ) } } render() { this.buildMenu(this.state.active); return ( <List> {this.menu} {this.state.active} {/* {this.menu} */} </List> ) } } export default Sidemenu;import * as React from 'react'; import { List, ListItemButton, ListItemText } from '@mui/material'; import { ListItem } from '@mui/material'; class Sidemenu extends React.Component { constructor(props) { super(props); this.state = { active: 'home' } } changeActiveItem = (element) => { this.setState({ active: element }); this.render(); } buildMenu() { var buildMenu = ['home', 'stammdaten']; return buildMenu.map((element) => { return ( <ListItem key={element}> <ListItemButton divider selected={element == this.state.active ? true : false} onClick={() => { this.changeActiveItem(element); console.log(this.state); }}> <ListItemText>{element}</ListItemText> </ListItemButton> </ListItem> ) }) } render() { return ( <List> {this.buildMenu()} {this.state.active} </List> ) } } export default Sidemenu;Ahora entiendo cuál es el problema. React se actualiza parcialmente. En este ejemplo paso una variable, respectivamente un objeto al lugar específico en el código.
React ahora compara el estado antes y después del cambio de estado. Tanto antes como después de la actualización se pasa el mismo objeto.
React no detecta ningún cambio y no vuelve a renderizar el objeto.
La solución es analizar el objeto en uno nuevo.
{this.menu}hay que cambiar a:
[...{this.menu}]así que con cada cambio de estado se reconoce un nuevo objeto. Sin embargo, todo debe disfrutarse con cierta precaución, en mi caso especial, se debe suponer que con cada cambio de estado también se debe volver a representar el lugar.