2

我的主要目标是如果用户在 firebase 中没有个人资料，则有条件地呈现“创建个人资料”按钮，如果用户有个人资料，则有条件地呈现“编辑个人资料”按钮。

我没有呈现编辑配置文件按钮的问题。我通过将身份验证用户“uid”与配置文件的“uid”进行比较来检查用户是否有配置文件。如果它们匹配，则将呈现编辑按钮。

我的问题是，当编辑按钮呈现时，创建按钮仍然出现，但它应该消失，因为我有条件地呈现这两个按钮。

我在这里想念什么？

编辑 2018 年 3 月 23 日

我已经解决了问题，但我仍然没有解决方案。问题是 map 函数正在循环通过“配置文件”数组并正在寻找一个等于登录用户“uid”的“uid”。

但是，如果“uid”与登录用户“uid”不匹配，则创建按钮仍将呈现，因为“配置文件”数组中的其他配置文件的 uid 不等于登录用户“uid”。

所以我想我的另一个问题是，

如何检查登录用户是否在数组和/或 Firebase 数据库中没有数据？

这是我的代码：

我有一个名为“配置文件”的数据库，我从中提取信息。

"Profiles" : {
"-L7p-wZNcvgBBTkvmn7I" : {
  "about" : "I'm a full stack web developer with many skills",
  "email" : "email@gmail.com",
  "frameworkOne" : "react",
  "frameworkThree" : "bootstrap",
  "frameworkTwo" : "javascript",
  "name" : "Dylan Prem",
  "projectInfo" : "You're on it!",
  "projectLink" : "https://hiremoredevs.com",
  "projectName" : "HireMoreDevs",
  "uid" : "ABCDEFG1234567"
}

}

反应组件：

class ProfileButtonToggle extends Component {
constructor(props){
    super(props);
    this.state = {
        authUser:null,
        Profiles:[]

    }
}

componentDidMount(){
  const profilesRef = firebase.database().ref('Profiles');
    profilesRef.once('value', (snapshot) => {
    let Profiles = snapshot.val();
    let newState = [];
    for (let profile in Profiles){
      newState.push({
        id: profile,
        uid:Profiles[profile].uid,
      });
    }
    this.setState({
      Profiles: newState
    });
  });   

  firebase.auth().onAuthStateChanged((authUser) => {
      if (authUser) {
        this.setState({ authUser });
      } 
    }); 
}


render() {
    return (
        <div>
        {this.state.authUser ?
                <div>
                    {this.state.Profiles.map((profile) => {
                        return(
                        <div key={profile.id}>
                            {profile.uid === this.state.authUser.uid ?
                            <Nav>
                                <NavItem>
                                    <Link className='btn yellow-button' to={`/edit/${profile.id}`}>Edit Profile</Link>
                                </NavItem>
                            </Nav>
                            :
                            <Nav>
                                <NavItem>
                                    <Link className='btn yellow-button' to={routes.CREATE_PROFILE}>Create Profile</Link>
                                </NavItem>
                            </Nav>
                        }
                        </div>
                    );
                    })}
                </div>
            :
            null
        }
        </div>

    );
  }
}

export default ProfileButtonToggle;
4

2 回答 2

2

经过数周的拉头发，我终于找到了解决方案。事实证明，我什至不需要“创建”按钮。

componentDidUpdate在渲染 DOM 后触发，这正是我所需要的。然后，我检查“ Profiles ”的孩子是否具有等于登录用户uid的uid，如果不是push()，则当前用户uid为“ Profiles ”并重新加载页面。它确实有效！

换句话说，如果该用户不存在配置文件，它将自动创建一个配置文件。

componentDidUpdate() {
    firebase.database().ref("Profiles").orderByChild("uid").equalTo(this.state.authUser.uid).once("value",snapshot => {
        const userData = snapshot.val();
        if (userData){
          console.log("exists!");
        } else {
            const profilesRef = firebase.database().ref('Profiles');
            const Profiles  = {
                uid: this.state.authUser.uid
            }
            profilesRef.push(Profiles);
            window.location.reload();
        }
    });
}

我将条件渲染更改为：

        <div>
        {this.state.authUser ?
            <Nav>
                {this.state.Profiles.map((profile) => {
                    return(
                    <NavItem key={profile.id}>
                            {profile.uid === this.state.authUser.uid ?
                                <Link id='edit-button' className='btn yellow-button job-text' to={`/edit/${profile.id}`}>Edit Profile</Link>
                                : 
                                null
                            }
                    </NavItem>
                );
                })}
            </Nav>
            :
            null
        }
        </div>

页面重新加载后，编辑按钮按预期呈现。

完整的组件

class ProfileButtonToggle extends Component {
constructor(props){
    super(props);
    this.state = {
        authUser:null,
        Profiles:[],
    }
}




componentDidMount(){
    const profilesRef = firebase.database().ref('Profiles');
        profilesRef.once('value', (snapshot) => {       
            let Profiles = snapshot.val();
            let newState = [];
            for (let profile in Profiles){
              newState.push({
                id: profile,
                uid:Profiles[profile].uid,
              });

            }
            this.setState({
              Profiles: newState
            });
          });

    firebase.auth().onAuthStateChanged((authUser) => {
      if (authUser) {
        this.setState({ authUser });

        
        } 
    }); 
}

componentDidUpdate() {
    firebase.database().ref("Profiles").orderByChild("uid").equalTo(this.state.authUser.uid).once("value",snapshot => {
        const userData = snapshot.val();
        if (userData){
          console.log("exists!");
        } else {
            const profilesRef = firebase.database().ref('Profiles');
            const Profiles  = {
                uid: this.state.authUser.uid
            }
            profilesRef.push(Profiles);
            window.location.reload();
        }
    });
}


render() {
    return (
        <div>
        {this.state.authUser ?
            <Nav>
                {this.state.Profiles.map((profile) => {
                    return(
                    <NavItem key={profile.id}>
                            {profile.uid === this.state.authUser.uid ?
                                <Link id='edit-button' className='btn yellow-button job-text' to={`/edit/${profile.id}`}>Edit Profile</Link>
                                : 
                                null
                            }
                    </NavItem>
                );
                })}
            </Nav>
            :
            null
        }
        </div>
      );
    }
 }

 export default ProfileButtonToggle;
于 2018-04-06T05:13:38.980 回答
1

只是一个快速提示，您的条件渲染可以使用&&逻辑运算符，因为它不会在三元运算符的 else 部分返回任何内容

<div>
        {this.state.authUser &&
            <Nav>
                {this.state.Profiles.map((profile) => {
                    return(
                    <NavItem key={profile.id}>
                            {profile.uid === this.state.authUser.uid ?
                                <Link id='edit-button' className='btn yellow-button job-text' to={`/edit/${profile.id}`}>Edit Profile</Link>
                                : 
                                null
                            }
                    </NavItem>
                );
                })}
            </Nav>
        }
        </div>

因此，如果不可用，它将呈现&&或 null之后的项目this.state.authUser

于 2019-11-15T23:22:16.223 回答