道具在它們傳遞到反應組件後變爲空

我在React中出現了一個非常奇怪的錯誤，其中一個組件看到一些參數被傳遞給它爲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的價值定義。然而，當在構造函數給予好評組件它們是空：

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這空。 props.upvoteId。這怎麼可能？

來源

2017-01-05 user1023465

您是否通過API請求異步獲取數據？然後，每當道具改變'componentWillReceiveProps（）'時，你需要'setState'，因爲當你初始化組件時，數據尚未加載。 –

修好了！非常感謝，補充說，作爲答案，我會標記它是正確的？ – user1023465

當然，很高興我能幫上忙！ –

您使用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) 
    }; 
}

來源

2017-01-06 00:04:14

道具在它們傳遞到反應組件後變爲空

回答

相關問題