第一次點擊時未定義它的作用| React/Redux/axios

Question

我建立一個網頁應用程序與反應，我有一個下拉列表頭，它包含鏈接到一個組件，使axios獲取請求，我保存在該狀態的響應，然後我訪問數據像{this.state.authData.authorizationDocumentConfiguration.optionFieldMap.documentTypeOption.label} 它第一次點擊它會拋出這個錯誤Uncaught (in promise) TypeError: Cannot read property 'optionFieldMap' of undefined但如果雙擊它，它實際上工作並呈現相應的數據。

組件：

import React, { Component } from 'react'; 
import axios from 'axios'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router-dom'; 
import { fetchUser } from '../../actions'; 

import PatientCard from './patient_card'; 

class PatientAdmission extends Component{ 
    constructor(props) { 
    super(props); 
    this.state = { authData: [] }; 

    } 
    componentDidMount() { 
    const { id } = this.props.match.params; 
    this.props.fetchUser(id); 

    axios.get("http://ec2-54-221-173-39.compute-1.amazonaws.com:8181/cxf/Demo/demo/get/inpatient-authorization-configuration") 
     .then(response => this.setState({ authData: response.data })); 
    } 
    render(){ 
    const { user } = this.props; 

    console.log('user this.props response: ',user); 

    if(!user){ 
     return <div>loading...</div>; 
    } 
    return(
     <div> 
     <PatientCard 
      dob={user.member.dateOfBirth} 
     />  {this.state.authData.authorizationDocumentConfiguration.optionFieldMap.documentTypeOption.label}       
     </div> 
    ); 
    } 
} 
function mapStateToProps({ users }, ownProps) { 
    return { user: users[ownProps.match.params.id] }; 
} 
function mapDispatchToProps(dispatch) { 
return { 
    fetchUser: id => fetchUser(id, dispatch) 
} 
} 
export default connect (mapStateToProps, mapDispatchToProps)(PatientAdmission); 

是什麼，即時通訊做錯了什麼？

Answer 1

這是因爲你正在從Axios公司電話authData，它不會提供，直到Axios公司要求完成

試試這個

return(
     <div> 
     <PatientCard 
      dob={user.member.dateOfBirth} 
     />  {this.state.authData.authorizationDocumentConfiguration && this.state.authData.authorizationDocumentConfiguration.optionFieldMap.documentTypeOption.label}       
     </div> 
    );