リアクション内のレンダリング関数の内部状態がヌルである

Question

ユーザーに関連するデータを取得するAPI呼び出しを行うコンポーネントがあります。ここに私のコードは、だラインAで

class Header extends React.Component { 

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

    } 

    componentDidMount() { 

    getUserData(xobni_api).then((data) =>{ 
     this.setState({user : data}); 
     console.log(this.state.user);//A 


    }); 
    } 
    render() { 
    return (
     <div className="header"> 
     <Masthead user={this.state.user.fullName} />//B 
     <PrimaryNav/> 

     </div> 
    ); 
    } 
} 
export default Header; 

ラインでBユーザーがnullであると私はエラーを取得していながら、私は、ユーザーの詳細をレンダリングすることができます。私は何が欠けている。私はcomponentDidMount()とcomponentWillMount()の両方でAPI呼び出しを試みました。どんな助けもありがたい。

Answer 1

初めてコンポーネントをレンダリングするときthis.state.userはnullです。それはコンストラクターの設定と同じです。したがって、this.state.user.fullNameは、null.fullNameに相当し、クラッシュします。

あなたのいずれか自分のuserオブジェクトの形状のあなたの初期状態の担当者に確認する必要があり、またはコンポーネントをレンダリングする前に、ヌルチェックを実行する必要があります。

render() { 
    return (
    <div className="header"> 
     {this.state.user && // <-- check if truthy 
     <Masthead user={this.state.user.fullName} /> 
     } 
     <PrimaryNav /> 
    </div> 
) 
} 

あなたはAJAXリクエストをやっているので、あなたはまた、ローディングインジケータを表示するには、この機会を利用することができます

render() { 
    return (
    <div className="header"> 
     {!this.state.user && // <-- if user is still null 
     <div>Loading...</div> 
     } 

     {this.state.user && // <-- check if truthy 
     <Masthead user={this.state.user.fullName} /> 
     } 
     <PrimaryNav /> 
    </div> 
) 
} 

Answer 2

初期では、レンダリング、this.state.userはnullで、あなたはからfullnameプロパティを取得しようとしていましたオブジェクトなので、エラーが発生します。チェンジ・ラインBを修正するには

：

{this.state.user && <Masthead user={this.state.user.fullName} />}