反応成分のプロパティが定義されていません

Question

このコードを実行した後、 "title"が定義されていないという例外があります。 apiが正しいデータを返すことを確認しました。また、デバッグモードでは、Ideaコンポーネントのrender（）がAPIからデータを取得するより早く実行されていることに気付きました。あなたはなぜこのように働いているのか説明できますか？そして、私はこの問題を解決するためにどのような選択肢がありますか？ おかげ

'use strict'; 

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const client = require('./client'); 

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = {map: {}}; 
} 

componentDidMount() { 
    client({method: 'GET', path: '/api/maps/1'}).done(response => { 
     this.setState({map: response.entity._embedded.map}); 
    }); 
} 

render() { 
    return (
     <Map map={this.state.map}/> 
    ) 
} 
} 

class Map extends React.Component { 
    render() { 
     return (
      <div id="map_header"> 
       <AddIdeaButton></AddIdeaButton> 
       <Idea idea={this.props.map.root}></Idea> 
      </div> 
     ); 
    } 
} 

class AddIdeaButton extends React.Component { 
    render() { 
     return (
      <a id="btn_add"> 
      </a> 
     ); 
    } 
} 

class Idea extends React.Component { 
    render() { 
     <div id="root">{this.props.idea.title}</div> 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('react') 
); 

Answer 1

データの非同期要求がまだMapとIdeaコンポーネントをレンダリング反応する時にいくつかの時間がかかります。データが利用可能なときにIdeaを条件付きで単純にレンダリングすることができます：

<div id="map_header"> 
    <AddIdeaButton></AddIdeaButton> 
    {this.props.map.root && (
     <Idea idea={this.props.map.root}></Idea> 
    )} 
</div>