React，Redux使用生命週期方法清除狀態

編輯9/5/17：
事實證明，我在React的反應代碼的不同部分存在問題，導致我相信我的堆棧沒有正確重置。我在/ Profile頁面上渲染的少數幾個組件之一是在一個空數組上調用array.length，並且該錯誤阻止了我的代碼運行，並且我的瀏覽器被凍結。感謝您的期待無論React，Redux使用生命週期方法清除狀態

我試圖重置組件卸載時在我的商店中的對象的狀態（讓我們稱之爲UID）。

UID的初始狀態是一個空字符串，當用戶點擊一個用戶名（一個用戶發了帖子）我正在渲染一個配置文件組件，但在渲染配置文件組件之前，我正在填充UID，並呈現與UID相匹配的配置文件組件。

我現在想要做的事情是當配置文件組件卸載時清除UID，因此如果用戶點擊不同的用戶名，我可以呈現不同的配置文件。

輪廓組件：

class Profile extends Component { 
    componentWillUnmount() { 
    this.props.clearUserUid() 
    } 
    render() { 
    return (
     <Grid id="profile"> 

     <Grid.Row> 
      <Grid.Column className='profileheader'> 
      <ProfileHeader /> 
      </Grid.Column> 
      </Grid.Row> 

      <Grid.Row> 
      <Grid.Column> 
       <AddSocial/> 
       <ListOfSocialLinks/> 
      </Grid.Column> 
      </Grid.Row> 

     </Grid> 
    ); 
    } 
}

行動

export const clearUserUid = uid => ({ 
    type: 'CLEAR_UID', payload: '' 
})

減速機：

import initialState from './initialState'; 

export default function (userUid = initialState.userUid, action) { 
    switch (action.type) { 
    case 'CLEAR_UID': 
     return action.payload; 
    default: 
     return userUid; 
    }

}

初始狀態

userUid: '',

組件聽userUid

class ListOfSocialLinks extends Component { 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    if(this.props.userUid && this.props.userUid.length > 0) { 
     firebase.database().ref(`users/${this.props.userUid}/social`).on('value', snapshot => this.props.fetchSocial(snapshot.val())); 
    } 
    else { 
     firebase.database().ref(`users/${this.props.userData.uid}`).on('value', snapshot => { 
     return this.props.fetchSocial(snapshot.val()) 
     }) 
    } 
    } 


    render() { 
    const { social, userData } = this.props; 
    return (<div className="social"> { this.renderSocial(social, userData) }</div>); 
    } 
}

userData.uid始終可供用戶查看自己的個人資料。

clearUserUid操作運行，並且我的存儲狀態更改爲空字符串，但是當我在配置文件組件卸載後單擊其他用戶時，頁面上出現錯誤。

如何正確地將商店的狀態重置爲空字符串？

來源

2017-09-05 Generaldeep

你試過用'null'而不是空字符串 –

@Amr我剛剛編輯我的文章並添加了正在監聽userUid更改的代碼。我試圖重新調整null作爲有效負載，但我無法調用空對象的長度，所以我的組件不會渲染 – Generaldeep

它看起來像你的例子中缺少一些代碼，但我的猜測是組件本身實際上並沒有卸載。當屬性通過redux更改時，它不會掛載/卸載，只是重新呈現。

有幾個事件可以插入。我的建議是使用componentWillUpdate來查看參數uid已更改並觸發清除。

// Invoked whenever there is a prop change 
// Called BEFORE render 
componentWillReceiveProps(nextProps) { 
    // Not called for the initial render 
    // Previous props can be accessed by this.props 
    // Calling setState here does not trigger an an additional re-render 
} 

// Called IMMEDIATELY BEFORE a render 
componentWillUpdate(nextProps, nextState){ 
    // You cannot use this.setState() in this method 
} 

// Called IMMEDIATELY AFTER a render 
componentDidUpdate(prevProps, prevState){ 
}

如果不是這種情況，您可能需要用更多示例重新處理該問題。

來源

2017-09-05 01:08:01

我再次編輯我的帖子反映了這一點。事實證明，國家正在發生變化。我有一個問題，在我的代碼中導致錯誤的地方。感謝關於生命週期方法的建議。爲了學習的目的，我會查看它們。 – Generaldeep

React，Redux使用生命週期方法清除狀態

回答

相關問題