라이프 사이클 메소드를 사용하여 React, Redux 해제 상태를 사용합니다.

Question

EDIT 9/5/17 :
React에서 반응 코드의 다른 부분에 문제가 발생하여 스택이 제대로 재설정되지 않았다는 것을 알게되었습니다 ./Profile 페이지에서 렌더링 한 몇 가지 구성 요소 중 하나는 빈 배열에서 array.length를 호출하고 있었고 그 오류로 인해 내 코드가 실행되지 않고 브라우저가 멈췄습니다. 관계없이 주셔서 감사합니다

구성 요소가 마운트 해제 될 때 내 저장소에서 개체의 상태 (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; 
    } 

}

초기 상태

,691 사용자가 자신의 프로필을 볼 수 있도록

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 듣고

userUid: '', 

구성 요소는 항상 사용할 수 있습니다.

clearUserUid 동작이 실행되고 저장소의 상태가 빈 문자열로 변경되지만 프로필 구성 요소가 마운트 해제 된 후 다른 사용자를 클릭하면 페이지에 오류가 발생합니다.

어떻게하면 저장소의 상태를 빈 문자열로 올바르게 재설정 할 수 있습니까?

Answer 1

예제에서 코드가 누락 된 것처럼 보입니다.하지만 실제로는 구성 요소 자체가 실제로 언 마운트되어 있지 않습니다. 속성이 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){ 
} 

그렇지 않은 경우 더 많은 예제로 질문을 다시 작성해야 할 수 있습니다.