Получение ошибки при закрытии реагирующей моды - PullRequest
Новая
       18

Получение ошибки при закрытии реагирующей моды

0 голосов
/ 02 ноября 2018

здесь, когда пользователь нажимает на изображение компонента UserProfile, открывается модальное окно с подробной информацией об изображении. Но когда пользователь закрывает модальное окно, генерируется ошибка. Ошибка: Невозможно прочитать свойство 'uid' из неопределенного в t.value (PostListItem.js: 68) Я думаю, что t пытается визуализировать postlistItem после модального закрытия, что не должно происходить, поскольку для содержимого установлено значение '' при закрытии модального окна.

// UserProfile 

class UserProfile extends React.Component{
constructor(props){
    super(props);
     this.state = {
        isFollowed: false,
        content: undefined
    } 
}

 componentDidMount(){  
 this.props.dispatch(usersFetchData(`http://localhost:5000/api/user/
 ${this.props.match.params.uid}`));
    (Object.keys(this.props.user).length !== 0) &&
        (this.props.user.followers.includes(this.props.currentUser.uid)) &&
            this.setState({isFollowed: true});
  }

 componentWillUnmount(){
     this.props.dispatch(resetUser());
 } 

 onFollow = () =>{
    if(this.state.isFollowed){
        this.props.dispatch(removeFollower(this.props.user.uid, 
 this.props.currentUser.uid));
        this.props.dispatch(removeFollowing(this.props.currentUser.uid, 
this.props.user.uid));
        this.setState({isFollowed: false}); 
    }else{
        this.props.dispatch(addFollower(this.props.user.uid, this.props.currentUser.uid));
        this.props.dispatch(addFollowing(this.props.currentUser.uid,this.props.user.uid));
        this.setState({isFollowed: true});    
    }  
} 

openModal = (post) => {
    this.setState({content:post});
    console.log(this.state);
}

closeModal = () =>{
    this.setState(() => ({ content: '' }));
    console.log(this.state);
}

render(){
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }
        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }
        return(
            <div className="userProfile">
                <div>
                    {console.log(this.props.user)}
                    { Object.keys(this.props.user).length !== 0 && 
                        <div className="user__details">
                            <div className="user__dp">
                                <div className="dp__container">
                                   <img src={this.props.user.avatar} alt= 
{this.props.user.name}/>
                                </div>
                            </div>
                            <div className="user__description">
                                <p className="user__name"> 
{this.props.user.name}</p>


                                <div className="user__button">
                                    {(this.props.currentUser.uid === 
this.props.user.uid) ?
                                        <button className="ef__button"><Link 
to={`/${this.props.user.uid}/edit`}>Edit Profile</Link></button> :
                                        <button 
                                        className="ef__button"
                                        onClick={this.onFollow}>
                                        {this.state.isFollowed? 'Following': 'Follow'}
                                    </button>
                                }
                                </div>
                            </div>
                        </div>
                   }

                </div>
                <div className="user__bio">
                   <p>{this.props.user.bio}</p>
                </div>
                <div>
                    <h3>Posts</h3>
                    <div className="userContent">
                    {this.props.user.posts && 
this.props.user.posts.map((post) =>{
                        return(
                            <div className="userPost">
                                <img src={post.content} onClick={() => 
this.openModal(post)}/>
                            </div>

                        );
                    })
                    }
                    <ContentModal
                        content={this.state.content}
                        closeModal={this.closeModal}
                    />
                    </div>
                </div>
            </div>
        );
        }       
}


const mapStateToProps = (state) =>{
console.log(state);
 return{ 
     currentUser: state.auth,
     user: state.users,
     hasErrored: state.usersHasErrored,
     isLoading: state.usersIsLoading
 }
};

export default connect(mapStateToProps)(UserProfile);

// contentModal 

const ContentModal = (props) => (
<Modal
    isOpen={!!props.content}
    onRequestClose={props.closeModal}
    shouldCloseOnOverlayClick={true}
    shouldCloseOnEsc={true}
    contentLabel="content"
    closeTimeoutMS={200}
    className="content__modal"
>
<div className="post__container">
    {<PostListItem {...props.content}/>}
</div>    
{console.log(props)}
</Modal>

1 Ответ

0 голосов
/ 02 ноября 2018

Вы получаете проблему, потому что изначально содержимое не определено, а когда вы закрываете модель, для содержимого устанавливается пустая строка, поэтому uid не будет доступен, поэтому вызывайте PostListItem только тогда, когда содержимое не определено и не пусто.

Добавьте приведенное ниже условие в компонент ContentModal 

{typeof props.content != "undefined" && props.content != "" && <PostListItem {...props.content}/>}
...