ライフサイクルメソッドを使用してReact、Reduxクリア状態を使用

Question

EDIT 9/5/17：
Reactの反応コードの別の部分に問題があり、スタックが正しくリセットされていないと思われました。/Profileページでレンダリングしていたいくつかのコンポーネントの1つは空の配列でarray.lengthを呼び出していたため、そのエラーがコードの実行を妨げていたため、ブラウザがフリーズしていました。関係なくお問い合わせしていただきありがとうございます

コンポーネントのマウントが解除されると、私の店でオブジェクトの状態をリセットしようとしています（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

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を聞い

userUid: '', 

コンポーネントは、常に自分のプロフィールを閲覧するユーザーのために利用可能です。

clearUserUidアクションが実行され、ストアの状態が空の文字列に変更されますが、プロファイルコンポーネントがアンマウントされた後に別のユーザーをクリックすると、ページにエラーが表示されます。

店舗の状態を空の文字列に正しくリセットするにはどうすればよいですか？

Answer 1

あなたの例でいくつかのコードが不足しているように見えますが、コンポーネント自体が実際にアンマウントしていないと思われます。プロパティがreduxを通して変わるとき、それはマウント/アンマウントせず、ただ再レンダリングします。

あなたが参加できるイベントはいくつかあります。私の提案は、paramaterのuidが変更されたことを確認し、clearをトリガするためにcomponentWillUpdateを使用することです。

// 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){ 
} 

そうでない場合は、あなたは例のより多くで質問を再作業する必要があるかもしれません。