爲什麼我的React組件落後一步？

Question

在我的部分，我有

componentDidUpdate (prevProps, prevState) { 
    console.log('here we roll', prevProps, prevState); 
    if(this.props.searchQuery.length > 0 && prevProps.searchQuery != prevState.value) { 
     this.setState({value: this.props.searchQuery}) 
    } 
    } 

所以當父組件向下傳遞變成searchQuery支柱，目前state的value是落後一步：

這是我看到：

here we roll 

Object {placeholder: "Search all the Vidys", autoSearch: true, searchQuery: "", showLogo: false} 

Object {value: "a", hints: Array[0], isMobile: true, placeholder: "Type Something...", selectedSearch: false…} 

那麼爲什麼它的值是前一個狀態的a和prop是空的？

Answer 1

發生這種情況的原因是，您在渲染之前將狀態與呈現之前的狀態進行比較，而不是當前已渲染狀態的道具。

理論上，應該使用componentWillReceiveProps道具傳播到狀態：

componentWillReceiveProps(nextProps, nextState) { 
    if(nextProps.searchQuery != this.state.value) { 
     this.setState({value: nextProps.searchQuery}) 
    } 
    }