关闭反应模式时出错

Question

此处当用户单击 UserProfile 组件的图片时，将打开一个包含图片详细信息的模式。但是当用户关闭模式时，会产生错误。错误：无法读取未定义的属性 'uid' 在 t.value (PostListItem.js:68) 我认为 t 试图在模式关闭后渲染 postlistItem，这不应该发生，因为在关闭模式时内容设置为 ''。

//用户配置文件

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>

Answer 1

您遇到问题是因为最初内容未定义，当您关闭模型时内容设置为空字符串，因此 uid 将不可用，因此仅当内容未定义且不为空时才调用 PostListItem。

在 ContentModal 组件中添加以下条件

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

关闭反应模式时出错

Getting error while closing the react-modal

reactjs

react-redux

react-modal