反応コンポーネントに渡された後に小道具がヌルになる

Question

Reactで非常に奇妙なエラーが発生しています。コンポーネントには、2つのパラメータがnullとして渡されています。ここでは、親コンポーネントのコードは次のとおりです。

return (
 
    <div> 
 
     {postUpvoteCount} {postUpvoteId} 
 
     <div className='col-xs-1 col-sm-1 comment-upvote'><Upvote upvoteId={postUpvoteId} upvoteCount={postUpvoteCount} userId={userId} postId={postId} commentId='-1'/></div> 
 
    </div> 
 
);

あなたは私がpostUpvoteCountとpostUpvoteIdの値が右Upvoteコンポーネントにそれを渡す前に定義されていることを確認してください見ることができるように。しかしUpvoteコンポーネントのコンストラクタで彼らがnullのとき：

constructor(props){ 
 
    super(props); 
 

 
    console.log(this.props); 
 
    this.state = { 
 
     upvoteId: this.props.upvoteId, 
 
     upvoteCount: Number(this.props.upvoteCount), 
 
     commentId: this.props.commentId, 
 
     postId: this.props.postId, 
 
     userId: this.props.userId, 
 
     upvoted: Boolean(this.props.upvoteId) 
 
    }; 
 
    }

私は小道具上にconsole.log呼び出す

は、私がthis.props.upvoteCountと、このためにはnullを取得しています。 props.upvoteId。これはどのように可能ですか？

Answer 1

データをAPIリクエストと非同期で取得しているため、コンポーネントを初期化するときに読み込まれません（constructor）。代わりに、ReactのcomponentWillReceiveProps()を使用して、コンポーネントが小道具を受け取るたびに状態を設定します。

componentWillReceiveProps(props) { 
    this.setState({ 
    upvoteId: props.upvoteId, 
    upvoteCount: Number(props.upvoteCount), 
    commentId: props.commentId, 
    postId: props.postId, 
    userId: props.userId, 
    upvoted: Boolean(props.upvoteId) 
    }; 
}