0
218
VistasReact falla al renderizar el nuevo componente después del cambio de estado
Lo siguiente falla al representar el Componente seleccionado incluso cuando se actualiza el estado. Supuse que podría tener que ver con la verificación superficial que hace reaccionar, sin embargo, después de forzar una nueva representación, la página aún muestra el componente seleccionado originalmente y no el nuevo componente. La única forma en que conseguí que funcionara correctamente fue cambiando el estado del servicio activo a <></> y luego cambiándolo al Componente de servicio correcto. Cualquier ayuda sería apreciada.
import React, { Component } from "react"; import AquireServices from "./AquireService"; import Navigation from "./Navigation"; import Service from "./Service"; class App extends Component{ constructor(props) { super(props); this.state=({ services: {}, activeService: <></> }); } async componentDidMount() { try{ let services = await AquireServices(); this.setState({ services: services }); } catch(error) { console.log(error); } } selectedField = async (field) => { let service = this.state.services[field]; if(service){ this.setState({ activeService: <Service props={service} /> }); } } render() { return( <Box sx={{ padding: 0, display: 'flex' }}> <Navigation selectFunction={this.selectedField.bind(this)}/> {this.state.activeService} </Box> ); } } export default App; 
Salida después de los cambios: 
1 Respuestas
Responde la pregunta0
No, no, no necesita almacenar un componente e intentar representarlo a través del objeto de estado.
Si observa, lo único que cambia cuando selecciona cosas en el cuadro de Navigation Box son los accesorios de service .
Entonces, en lugar de almacenar un componente completo, puede almacenar los accesorios del servicio seleccionado. Luego, puede pasar esos accesorios directamente al componente Service en render() , así:
class App extends Component{ constructor(props) { super(props); this.state=({ services: {}, activeService: undefined }); } async componentDidMount() { try{ let services = await AquireServices(); this.setState({ services: services }); } catch(error) { console.log(error); } } selectedField = async (field) => { let service = this.state.services[field]; if(service){ this.setState({ activeService: service }); } } render() { const {activeService} = this.state; return( <Box sx={{ padding: 0, display: 'flex' }}> <Navigation selectFunction={this.selectedField.bind(this)}/> {activeService ? <Service props={activeService}> : undefined} </Box> ); } }