は、それがデータを受信する前に、私は私のスタートアップで

Question

をレンダリングする前にそれをチェックしてみても、私は1つに「outputList」

と呼ばれる配列を取り込むなど、Reduxの中に私のグローバルストアにいくつかの変数を読み込み、レンダリングしているリアクト

Uncaught TypeError: Cannot read property 'length' of undefined

それが1または2秒後にデータを受信すると、その後、：述べロード中に、私は、レンダリングの前にデータのエラーチェックしようとしていても、それを実行する私のコンポーネントで、それはまだエラーで赤点滅しますそれは正しくロードされます。明らかに、これは容認できません。データを受け取っているAPIも同期しています。

私のコンポーネントには以下のものがあります。それは "それは働いた！"ブラウザがエラーで点滅した後にのみ、プロパティの長さが定義されていないメッセージが表示されます。

どうすればこの問題を解決できますか？任意の助けてくれてありがとう

renderContent() { 
    if (this.props.outputList.length > 0) { 
    return (<span>it worked!</span>); 
    } 
    else { 
    return (<span>did not work</span>); 
    } 
} 

render() { 
    return (
    {this.renderContent()} 
); 
} 

EDIT：renderContentで

（）私は要求通りにconsole.log（this.props.outputList）を追加しました。空の配列 2番目のログ：：私は2つのログ

最初のログを取得する人口配列

申し訳ありませんが私はuが本当にuの私は、実際の配列データをポストするん必要があると思ういけませんか？

Answer 1

これはコンポーネントのライフサイクル中に発生するasyc要求のため、React devにとって非常によくある問題です。

非常に簡単な解決策は、コンテンツの実際の身体をレンダリングする際に決定され、あなたのレンダリング（）で条件を定義することです。ここでは

render(){ 
    if(!this.props || this.props.data == undefined){ 
    return null; //You can change here to put a customized loading spinner 
    } 

    return(
    <div className="container">{this.props.data}</div> 
); 
} 

this.props.dataはReduxのasyc機能から取得されます。