React組件沒有正確讀取this.props

我有一個反應組件，它接收來自它的父項App.js的道具。這工作正常。我可以CONSOLE.LOG（）這樣的：React組件沒有正確讀取this.props

componentWillReceiveProps(props) { 
    console.log(props); 
    this.getPosts() 
}

的console.log（）正確地顯示這裏的道具：

{pageNumber: 2, loggedIn: true}

然而，在我getPosts（）方法，我從this.props閱讀：

getPosts() { 
    console.log("in post list and page is" + this.props.pageNumber) 
}

而且它打印：

in post list and page is 1

它總是滯後1次，無論如何 - 這意味着，當道具的pageNumber值爲3時，它打印爲2，道具的值爲4，打印爲3等。這使我獲取分頁服務器端時出現錯誤的帖子。

如何獲得正確的值？

來源

2017-09-26 joey

您收到的道具是下一個新道具，並且this.props尚未在此生命週期階段更新。你應該直接傳遞道具getPosts（props.pageNumber），而不是

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops componentWillReceiveProps(nextProps)

componentWillReceiveProps（）安裝的組件接收新道具之前被調用。如果您需要更新狀態以響應prop更改（例如，重置它），您可以比較this.props 和nextProps，並使用this.setState（）以此方法執行狀態轉換。

來源

2017-09-26 12:07:10

您從componentWillReceiveProps函數調用getPosts。在這一點上的時間，該組件的原始道具還沒有更新，所以在訪問getPoststhis.props.pageNumber不顯示更新的道具，你應該通過nextProps到getPosts功能，然後訪問它像

componentWillReceiveProps(nextProps) { 
    console.log(nextProps); 
    this.getPosts(nextProps); 
} 

getPosts(nextProps) { 
    console.log("in post list and page is" + nextProps.pageNumber) 
}

來源

2017-09-26 12:05:47

React組件沒有正確讀取this.props

回答

相關問題