this.State带来了未定义的，接下来的对象

Question

当我为乐器的详细信息进行获取时，请首先给我以不确定状态的状态，并在下一行中为对象。首先使道具读取未定义的信息并打破页面。

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>
    )

}

当我还没有评论道具时，就会出现这一点

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

，当我对道具发表评论时，

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, …}

这就是我的问题。为什么console.log向我发送了2次日志，一次未定义，然后将其发送给对象？

Answer 1

这是因为您的提取请求不是在componentDidmount在屏幕上的第一个渲染之后运行以避免此使用componentWillmount而不是在componentdidmount而不是提出

。是因为您仅保存ID，而您正在尝试调用其他对象

Answer 2

因为渲染方法首先称为 componentDidmount 。
第一次调用渲染方法，在组件和控制台打印的状态对象中没有instrumentodetail undefined。调用渲染后，componentDidmount被调用并使用setState（）内部的内部导致渲染组件。在第二个渲染instrumentodetail中是在组件的状态对象中，因此请打印它。
参见 https：//reactjs.org/docs/react-comt-componty.html