Reactjs 如何通过映射函数有条件地使用React和Firebase渲染元素？

我的主要目标是，如果用户在firebase中没有配置文件，则有条件地呈现“创建配置文件”按钮，如果用户有配置文件，则呈现“编辑配置文件”按钮

渲染“编辑配置文件”按钮时没有问题。我通过比较auth用户的“uid”和配置文件的“uid”来检查用户是否有配置文件。如果它们匹配，则“编辑”按钮将呈现

我的问题是，当“编辑”按钮渲染时，“创建”按钮仍然会出现，但它应该会消失，因为我正在有条件地渲染这两个按钮

我错过了什么

2018年3月23日编辑 我已经解决了这个问题，但仍然没有解决办法。问题是map函数正在“Profiles”数组中循环，并且正在查找与登录用户“uid”相等的“uid”

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

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

如何检查登录用户在阵列和/或Firebase db中是否没有数据？ 这是我的密码：

我有一个名为“Profiles”的数据库，我从中提取信息

"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;

class ProfileButton切换扩展组件{
建造师（道具）{
超级（道具）；
此.state={
authUser:null，
个人资料：[]
}
}
componentDidMount（）{
const profilesRef=firebase.database（）.ref（'Profiles'）；
profilesRef.once（'值'，（快照）=>{
让Profiles=snapshot.val（）；
让newState=[]；
用于（在配置文件中设置配置文件）{
newState.push({
id:profile，
uid:Profiles[profile].uid，
});
}
这是我的国家({
简介：newState
});
});   
firebase.auth（）.onAuthStateChanged（（authUser）=>{
if（authUser）{
this.setState（{authUser}）；
} 
}); 
}
render（）{
返回(
{this.state.authUser？
{this.state.Profiles.map（（profile）=>{
返回(
{profile.uid==this.state.authUser.uid？
编辑配置文件
:
创建配置文件
}
);
})}
:
无效的
}
);
}
}
导出默认配置文件按钮切换；

经过数周的拉扯，我终于找到了解决办法。事实证明，我甚至不需要“创建”按钮

componentdiddupdate在呈现DOM后激发，这正是我所需要的。然后，我检查“Profiles”的子项是否具有与登录用户相同的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>

{this.state.authUser？
{this.state.Profiles.map（（profile）=>{
返回(
{profile.uid==this.state.authUser.uid？
编辑配置文件
: 
无效的
}
);
})}
:
无效的
}

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

完整组件

class ProfileButton切换扩展组件{
建造师（道具）{
超级（道具）；
此.state={
authUser:null，
简介：[]，
}
}
componentDidMount（）{
const profilesRef=firebase.database（）.ref（'Profiles'）；
profilesRef.once（'值'，（快照）=>{
让Profiles=snapshot.val（）；
让newState=[]；
用于（在配置文件中设置配置文件）{
newState.push({
id:profile，
uid:Profiles[profile].uid，
});
}
这是我的国家({
简介：newState
});
});
firebase.auth（）.onAuthStateChanged（（authUser）=>{
if（authUser）{
this.setState（{authUser}）；
} 
}); 
}
componentDidUpdate（）{
firebase.database（）.ref（“Profiles”）.orderByChild（“uid”）.equalTo（this.state.authUser.uid）。一次（“value”，快照=>{
const userData=snapshot.val（）；
如果（用户数据）{
log（“存在！”）；
}否则{
const profilesRef=firebase.database（）.ref（'Profiles'）；
常量配置文件={
uid:this.state.authUser.uid
}
轮廓推送（轮廓）；
window.location.reload（）；
}
});
}
render（）{
返回(
{this.state.authUser？
{this.state.Profiles.map（（profile）=>{
返回(
{profile.uid==this.state.authUser.uid？
编辑配置文件
: 
无效的
}
);
})}
:
无效的
}
);
}
}
前任
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;

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