When I'm doing a fetch for the details of an instrument, fetch give me first the state with undefined status and in the next line the object. Making that the props in first place read the undefined information and breaking the page.

class Detailinstrumentos extends Component {
constructor(props){
    super(props);
    this.state = {
        instrumentos: [],
    }
};

async componentDidMount(){
    try{
        const id = this.props.match.params.id;

        // console.log("id",this.props)
        
        let instrumentos = await fetch(`http://localhost:5000/instrumentos/${id}`).then(response => response.json())
        
            // console.log(instrumentos)

        this.setState({
            // id: id,
            instrumentoDetail: instrumentos.id
            
        });
        
    }
    catch(error){
        console.log(error);
    }
}
render(){
        let instrumento1 = this.state.instrumentoDetail
        console.log("holaaaa",instrumento1)
        return(
            <article className="instrumentos-article">    
            <Instrumento
                                         imagenes={instrumento1.imagenes[0].url_imagen}
                                         nombre={instrumento1.nombre}
                                         fabricante={instrumento1.fabricante}
                                         precio={instrumento1.precio}
                                        />
        </article>
    )

}

This appear when i havent commented the props

detailInstrumentos.js:36 holaaaa undefined
detailInstrumentos.js:36 holaaaa undefined

detailInstrumentos.js:40 Uncaught TypeError: Cannot read properties of undefined (reading 
'imagenes')
at Detailinstrumentos.render (detailInstrumentos.js:40:1)
at finishClassComponent (react-dom.development.js:17485:1)
at updateClassComponent (react-dom.development.js:17435:1)
at beginWork (react-dom.development.js:19073:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
render @ detailInstrumentos.js:40
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:9
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

And this appear when i had commented the props

detailInstrumentos.js:36 holaaaa undefined
detailInstrumentos.js:36 holaaaa {id: 2, nombre: 'Bajo-Eléctrico-4-Cuerdas-Newen-Onas-Jb', 
fabricante: 'Newen-Onas', precio: 120000, descuento: 0, …}

So my question is. Why the console.log is sending me 2 times the log, one time undefined and next the object?

CodePudding user response：

This is because you the fetch request is not made at first componentDidMount runs after the first render on the screen to avoid this use componentWillMount instead

and the reason you are getting that long error is because you saved only the Id and you are trying to call other object

CodePudding user response：

because render method is called first and then componentDidMount. first time that render method is called, there is no instrumentoDetail in state object of component and console prints undefined. after calling render, componentDidMount gets called and using setState() inside of it causes re render component. in second render instrumentoDetail is in state object of component so console prints it.
see https://reactjs.org/docs/react-component.html