如何在用戶輸入容器時使用React/Redux刷新道具

我有競賽部分，它重複所有來自數據庫的比賽。當用戶點擊其中的一個時，它會將他重定向到競賽頁面，加載一秒鐘並呈現包含所有細節的頁面。到現在爲止還挺好。如何在用戶輸入容器時使用React/Redux刷新道具

但是當用戶回到比賽組，然後點擊第二場比賽時，它會立即加載上一場比賽，加載時間爲0。

從我的角度來看，失敗的是組件的道具在我渲染組件時（第二次）沒有更新。是不是一個路由器的問題，這是我的第一本能，因爲我看到route.params按照變化，但我派遣改變道具的行動不派遣。以下是該組件的一些代碼。

class CompetitionPage extends React.Component { 

componentWillMount() { 
    let id = getIdByName(this.props.params.shortname) 
    this.props.dispatch(getCompAction(id)); 
    this.props.dispatch(getCompMatches(id)); 
    this.props.dispatch(getCompParticipants(id)); 
    this.props.dispatch(getCompBracket(id)); 
} 

render() { 
let { comp, compMatches, compBracket, compParticipants } = this.props 
...

我試過我知道的每個生命週期方法。組件將/不會掛載，組件將/更新，我甚至將shouldUpdate設置爲true，並沒有這樣做。據我所知，問題將通過一種生命週期方法來解決，以便每次用戶進入比賽頁面時分發動作，而不僅僅是第一次。我在這裏沒有選擇，所以任何幫助將不勝感激。

注意：我是React/Redux的新手，所以我知道有一些東西有反模式/做得不好。

更新：新增CompetitionsSection

class CompetitionsSection extends React.Component { 

    render() { 
     const {competitions} = this.props; 
     return (
      ... 
      { Object.keys(competitions).map(function(comp, i) { 
      return ( 
       <div key={i} className={competitions[comp].status === 
       undefined? 'hide-it':'col-xs-12 col-md-6'}> 
       ... 
       <Link to={"/competitions/"+competitions[comp].shortName}> 
        <RaisedButton label="Ver Torneo" primary={true} /> 
       </Link> 
       ...

來源

2017-07-27 user3889291

您可以發佈您'CompetitionSection'代碼？我最初的猜測是，你的'CompetitionPage'只是更新，而不是卸載/重新安裝，但我必須看到代碼確定 – taylorc93

你試過'componentWillReceiveProps（nextProps）'嗎？也許這裏沒有更新... – Brejk

@ taylorc93如何確保'CompetitionPage'卸載/ remound組件？我會更新這個問題並添加一些代碼。 – user3889291

它有助於更好地理解生命週期掛鉤。將組件放置在DOM上時安裝組件。這隻能發生一次，直到它從DOM中刪除。當傳遞新的道具或調用setState時發生UPDATE。有幾個方法，當更新時，您認爲他們應該都不會發生排查：

確保您在componentDidMount或componentDidUpdate改變狀態。您無法觸發componentWillMount中的更新。
確保新的道具或狀態是完全新的對象。如果您在道具中傳遞一個對象，並且您只是對該對象進行變異，則不會觸發更新。舉例來說，這不會觸發更新：

class CompetitionPage extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     competitions: [ compA, compB ] 
    } 
    } 

    triggerUpdate() { 
    this.setState({ 
     competitions: competitions.push(compC) 
    }) 
    } 

componentDidMount() { 
    triggerUpdate() 
} 

render() { 
    return(
    <div> 
     Hello 
    </div> 
) 
}

這是由於這樣的事實，一個新的競爭被追加到時的陣列。正確的方法是完全地創建一個新的狀態對象，並改變需要改變什麼：

const newCompetitions = this.state.competitions.concat(compC) 

this.setState(Object.assign({}, this.state, { competitions: newCompetitions }))

上的更新

使用ComponentWillRecieveProps比較以前和當前道具值。你可以在這裏SETSTATE如果做清理需求：

瞭解更多關於這種方法的陣營文檔中：

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

來源

2017-07-27 22:31:27

'確保你改變了componentDidMount或componentDidUpdate中的狀態''它不會工作，因爲我從'this.props'獲得了這些數據，並且它們沒有更新，所以我認爲問題在此之前。 '確保新的道具或狀態是完全新的對象'但我該怎麼做？我沒有將道具傳遞給另一個組件，我只是路由到一個新的組件，並且一旦我做出調用和派發操作（使用route.params）來獲得我需要的內容。 '在更新上使用ComponentWillRecieveProps來比較先前和當前的道具值'這不起作用 – user3889291

如何在用戶輸入容器時使用React/Redux刷新道具

回答

相關問題