Question

在这里，当用户单击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>

Answer 1

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

在ContentModal组件中添加以下条件

#include <windows.h>

10 DIALOGEX 0, 0, 130, 47
STYLE DS_CENTER | DS_SETFONT | WS_CAPTION | WS_MINIMIZEBOX | WS_SYSMENU
CAPTION "Checkbox status"
LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US
FONT 9, "Segoe UI"
{
  CONTROL "", 11, STATIC, SS_BLACKRECT | WS_CHILD | WS_VISIBLE, 5, 5, 120, 20
  CONTROL "&Status", 12, BUTTON, BS_DEFPUSHBUTTON | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 75, 30, 50, 12
}


20 DIALOGEX 0, 0, 120, 20
STYLE DS_SETFONT | DS_CONTROL | WS_CHILD
LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US
FONT 9, "Segoe UI"
{
  CONTROL "Checkbox", 21, BUTTON, BS_AUTOCHECKBOX | WS_CHILD | WS_VISIBLE | WS_TABSTOP, 0, 5, 50, 10
}

关闭react-modal时出现错误

1 个答案: