は、私は次のコードを持っているJSONデータからオブジェクトの上

Question

を反復反応します。

「console.log（typeof this.state.data.messages）;」と入力した後、

  {Object.keys(this.state.data.messages).map(function(key) { 
       return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>; 
      })} 

しかし、私は私のコンソール内で、次のいます：

キャッチされない例外TypeErrorは：未定義またはnull変換できません「this.state.data.messages」は、以下のことを目的であることを私が集まっていますオブジェクト

Answer 1

ここでの問題は、最初はデータを空の文字列として設定することです。あなたのcomponentDidMountでは、ajax呼び出しを行い、非同期反応がまだレンダリングされるため、ajax呼び出しを行います。 this.state.data.messagesにアクセスしようとすると、this.state.dataは空文字列なので、メッセージというプロパティはありません。

this.state.loading === trueがdivに何か他のものをレンダリングし、this.state.loading === false && this.state.data.messagesが実際に何をしようとしているかを返す場合は、読み込みとレンダリングメソッドで初期状態プロパティがあります。

ちょうどあなたがJSONレスポンス

this.state = { 
    data: '', 
    loading: true 
    } 
componentDidMount() { 
     const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json'; 
     $.get(newsfeedURL, function(result) { 
     this.setState({ 
      data: JSON.parse(result), 
      loading: false 
     }); 
     console.log(typeof this.state.data.messages); 
     }.bind(this)); 
    } 
render() { 
    let content; 
    if (this.state.loading === false && this.state.data.messages) { 
    content = {Object.keys(this.state.data.messages).map(function(key) { 
    return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>; 
    })} 
    } else { 
    content = ''; // whatever you want it to be while waiting for data 
    } 
    return (
    <div> 
     {content} 
    </div> 
) 
} 

Answer 2

非同期呼び出しが返される前にレンダリングするつもりです。

データが格納される前に、ケースを処理する必要があります。それ以外の場合は、期待している状態に合わせて初期状態を変更する必要があります。