2016-03-09 18 views
5

サーバーからデータを取得しようとしましたが、何らかの理由でcomponentDidMount()が実行されていません。私はconsole.log()の文をcomponentDidMount()の中に加えて、発砲しているかどうかを調べました。私はサーバの要求がうまくいくかどうかを知っています。私はそれを反応の外で使っていたので、それはうまくいきました。ここでcomponentコンポーネントのマウント時にcomponentDidMount()が呼び出されない

class App extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     obj: {} 
    }; 
    }; 

    getAllStarShips() { 
    reachGraphQL('http://localhost:4000/', `{ 
    allStarships(first: 7) { 
     edges { 
     node { 
      id 
      name 
      model 
      costInCredits 
      pilotConnection { 
      edges { 
       node { 
       ...pilotFragment 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
    fragment pilotFragment on Person { 
    name 
    homeworld { name } 
    }`, {}). then((data) => { 
    console.log('getALL:', JSON.stringify(data, null, 2)) 
     this.setState({ 
     obj: data 
     }); 
    }); 
    } 

    componentDidMount() { 
    console.log('Check to see if firing') 
    this.getAllStarShips(); 
    } 

    render() { 
    console.log('state:',JSON.stringify(this.state.obj, null, 2)); 
    return (
    <div> 
     <h1>React-Reach!</h1> 
     <p>{this.state.obj.allStarships.edges[1].node.name}</p> 
    </div> 
); 
} 

} 

render(
    <App></App>, 
    document.getElementById('app') 
); 
+0

ReactDOM.renderを使用していますか?コンポーネントを元の状態でレンダリングする際に問題が発生することがあります。完全なthis.state.obj.allStarships.edges [1] .node.nameを元の状態に戻してください(または、レンダリングメソッドでの使用が少し安全です)。 –

+0

'allStarships'が' undefined'であるため、コンポーネントのレンダリング中にTypeErrorを解除する必要があります。もしそうなら、これはあなたのアプリをクラッシュさせ、実行時の実行を妨げます。ちょうど推測。 –

+0

あなたは何を意味するのかわからないジムペッド、私は反応domを使用しています。 –

答えて

8

問題は、次の行がthis.state.obj.allStarships.edgesを使用しないようにエラー

<p>{this.state.obj.allStarships.edges[1].node.name}</p> 

修正これを生成しているので、レンダリング方法は、クラッシュしていることである[1]各受信者が定義されていることを保証できない場合は、.node.nameを直接入力してください。

関連する問題