ネストされたオブジェクトに反応が返される

Question

ネストされていない限り、Stateからデータを返すコンポーネントがあります。しかし、オブジェクト内で少し深く掘り下げる必要がある場合は、エラーが発生します。 "TypeError：プロパティ 'name'が未定義です。

私は値があることを確信しています（チェックされたインスペクタと変数は確かに値を持っているので、コードに入れるものを知っていました）。より高い価値をもたらすが、より低い価値をもたらすのはなぜなのだろうか？

class Concert extends Component { 

constructor(props) { 
    super(props); 

    this.state = ({ 
     concert:'' 
    }) 
} 
componentDidMount(){ 
    var concertid = `${REQ_URL}/${this.props.match.params.concertid}`; 
    fetch(concertid, { 
     method: 'GET' 
    }) 
    .then(response => response.json()) 
    .then(json => { 
     this.setState({ 
      concert:json 
     }) 
    }) 


} 
render() { 
    return (
     <div> 
      <Header /> 
      <div className="concert"> 
       <div className="venue"> 

       //THIS IS THE PART THAT RETURNS ERROR 
       //this.state.concert.id returns a correct value 
       //POSITIVE this.state.concert.artist.name DOES CONTAIN VALUE 

       Venue: {this.state.concert.artist.name} 
       </div> 

      </div> 
     </div> 
     ) 
} 

}

Answer 1

、this.state.concertの値が''です（あなたは、コンストラクタでその値を設定する）ので、 undefined.nameにアクセスしようとしています - あなたのエラーがあります。あなたのfetchコールのsuccessコールバックが行われた後、およびのみ、その値が利用できるようになります -

this.state.concertの値が変更を取得しているだけ後にコンポーネントがロードされました。あなたは何ができるか

は、あなたがそれにアクセスする前に値を持っているかどうかを確認です：

{this.state.concert && this.state.concert.artist && 
    <div>Venue: {this.state.concert.artist.name}</div> 
}  

Answer 2

簡単に、API呼び出しを使用すると、APIレスポンスを得るまでそうthis.state.concert.artist.name}が{ "空" になります非同期です。

使用は、この：あなたはあなたが実際にあるthis.state.concert.artist.nameにアクセスしようとしている場合

コンポーネントが初めてレンダリングされる

  Venue: {this.state.concert && this.state.concert.artist && this.state.concert.artist.name} 

Answer 3

問題は、APIの呼び出しは非同期であるため、データがある前にレンダリングしようとしています。

この問題を解決するためのよりよい方法は、デフォルトでes6 object destructuringを使用して値を抽出することである。

const { 
    id, 
    artist: { 
    name 
    } = {} 
} = this.state.concert; 

-

Venue: {name} 

この方法では、アーティストが存在しない場合は、だけではなく、undefinedを取得しますエラーを投げるのは

また、コンサートのコンサートはデフォルトでコンストラクタのオブジェクトにする必要があります。

this.state = { 
    concert: {} 
};