如何停止更新reactjs

Question

我陷入了有點奇怪的情況，我使用ReactJS。我有標題容器，標題欄，標題容器。標題容器具有導航欄。點擊它會影響標題欄。我正在使用反應路由器進行導航。我正在使用componentDidMount生命週期方法。

標題容器加載時僅觸發一次的問題。所以我用componentDidUpdate。但是當我將標題欄組件添加到標題容器時發生了這個問題。所以現在我的componentDidUpdate無限循環運行。我試圖使用shouldComponentUpdate(nextProps, nextState)，但我不知道什麼條件把它返回false。

export class TitleContainer extends React.Component { 
    componentDidMount() { 
     this.props.dispatch(fetchDetail(this.props.match.params.program_id)) 
    } 
    componentDidUpdate(prevProps, prevState) { 

     this.props.dispatch(fetchDetail(this.props.match.params.id)) 
    } 

    shouldComponentUpdate(nextProps, nextState){ 
     console.log("current props",this.props) 
     console.log("next props",nextProps) 
     // if(this.props.name == nextProps.name) 
     //  return false; 
     return true; 
    } 
    render() { 

     console.log("data in contaner", this.props) 
     return (
     <div> 
     <Title name = { this.props.name } 

      /> 
      </div> 
     ) 
    } 
} 
const mapStateToProps = (state) => { 
    console.log("update state", state) 

    return { 
     programProfileData: state.DetailReducer.Details, 

     name: state.DetailReducer.name 
    } 
} 
export default connect(mapStateToProps)(TitleContainer) 

Answer 1

如果我理解你的問題，你想獲取其他數據，如果你改變參數？

如果是這樣，我只是重新安裝整個組件。

class TitleContainer extends React.Component { 
    componentDidMount() { 
     this.props.dispatch(fetchDetail(this.props.match.params.program_id)) 
    } 

    render() { 

     console.log("data in contaner", this.props) 
     return (
     <div> 
     <Title name = { this.props.name } 

      /> 
      </div> 
     ) 
    } 
} 
const mapStateToProps = (state) => { 
    console.log("update state", state) 

    return { 
     programProfileData: state.DetailReducer.Details, 

     name: state.DetailReducer.name 
    } 
} 
export default connect(mapStateToProps)(TitleContainer) 

我認爲你不需要使用componentUpdate。您導航到您的地址，反應路由器將創建該組件，並且您可以提取匹配道具。

在你的頭文件中，你可以使用來自反應路由器dom庫的其他鏈接，它將替換你現有的組件。如果你點擊一個鏈接，反應路由器將其推送到瀏覽器歷史記錄並創建一個新組件，因此參數被更新。