无法使用Firebase Firestore有条件地呈现React本机屏幕，引用；遗失报税表；

我正在React Native中处理一个组项目，我们有一个名为

EventListScreen.js

，由选项卡导航器调用的页面。在这个文件中，我们显示了从Firebase Cloud Firestore数据库调用的事件列表。我们希望根据用户是“志愿者”还是“组织”，有条件地使用“添加事件”按钮显示此页面

这是该文件的完整代码，以免遗漏任何内容

const EventListScreen = (props) => {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    firebase
      .firestore()
      .collection("events")
      .onSnapshot((querySnapshot) => {
        const events = [];
        querySnapshot.docs.forEach((doc) => {
          const { address, eName } = doc.data();
          events.push({
            id: doc.id,
            address,
            eName,
          });
        });
        setEvents(events);
      });
  }, []);

  const OrganizationScreen = () => {
    <ScrollView>
      <Button
        onPress={() => props.navigation.navigate("AddEvent")}
        title="Add Event"
      />
      {events.map((event) => {
        return (
          <ListItem
            key={event.id}
            bottomDivider
            onPress={() => {
              props.navigation.navigate("EventDetails", {
                userId: event.id,
              });
            }}
          >
            <ListItem.Chevron />
            <ListItem.Content>
              <ListItem.Title>{event.uId}</ListItem.Title>
              <ListItem.Title>{event.address}</ListItem.Title>
              <ListItem.Title>{event.eName}</ListItem.Title>
            </ListItem.Content>
          </ListItem>
        );
      })}
    </ScrollView>;
  };

  const VolunteerScreen = () => {
    {/* ... the same thing as the above without the <Button> element ... */}
  };

  firebase
    .firestore()
    .collection("users")
    .doc(firebase.auth().currentUser.uid)
    .get()
    .then((doc) => {
      if (doc.data().accountType == "Volunteer") {
        return VolunteerScreen();
      } else {
        return OrganizationScreen();
      }
    });
};

export default EventListScreen;

const EventListScreen=（道具）=>{
const[events，setEvents]=useState（[]）；
useffect（（）=>{
火基
.firestore（）
.收集（“事件”）
.onSnapshot（（querySnapshot）=>{
常量事件=[]；
querySnapshot.docs.forEach（（doc）=>{
const{address，eName}=doc.data（）；
事件。推({
id:doc.id，
地址:，
艾娜，
});
});
设置事件（事件）；
});
}, []);
const OrganizationScreen=（）=>{
props.navigation.navigate（“AddEvent”）}
title=“添加事件”
/>
{events.map（（事件）=>{
返回(
{
props.navigation.navigate（“EventDetails”{
userId:event.id，
});
}}
>
{event.uId}
{event.address}
{event.eName}
);
})}
;
};
常量屏幕=（）=>{
{/*…与上面相同，没有元素…*/}
};
火基
.firestore（）
.收集（“用户”）
.doc（firebase.auth（）.currentUser.uid）
.get（）
。然后（（doc）=>{
如果（doc.data（）.accountType==“志愿者”）{
返回屏幕（）；
}否则{
返回OrganizationScreen（）；
}
});
};
导出默认事件列表屏幕；

根据从Firebase检测到的用户类型，除了显示两种类型的HTML之外，还有其他选择吗？非常基本：我们只想在用户类型为“志愿者”时删除或停用该按钮。上面所示的这种方法以及一些其他语法衍生工具将导致一个错误，React认为无法返回渲染

编辑

下面是我在逻辑的Firebase部分中放入log语句时的情况。它可以正确识别用户是“志愿者”类型，但它给出了错误解释“渲染时未返回任何内容。这通常意味着缺少返回语句。或者，若要不渲染任何内容，则返回null”。这可以通过在Firebase位后放置一个简单的返回语句来解决，但这似乎覆盖了我们想要呈现的其他HTML

所以。。。也许这里存在某种范围问题

---

您实施的方式使事情变得复杂

有下面这样的流程 在useEffect中，首先加载用户类型，然后根据用户类型加载事件呈现按钮，直到加载用户并显示ActivityIndicator，代码应如下所示

const EventListScreen = (props) => {
  const [events, setEvents] = useState([]);
  const [userType,setUserType]=useState();

  useEffect(() => {
  firebase
    .firestore()
    .collection("users")
    .doc(firebase.auth().currentUser.uid)
    .get()
    .then((doc) => {
       setUserType(doc.data().accountType);
      firebase
      .firestore()
      .collection("events")
      .onSnapshot((querySnapshot) => {
        const events = [];
        querySnapshot.docs.forEach((doc) => {
          const { address, eName } = doc.data();
          events.push({
            id: doc.id,
            address,
            eName,
          });
        });
        setEvents(events);
      });
    });
  }, []);

  if(!userType)
   return <ActivityIndicator/>;

  return (
    <ScrollView>
      {
        //if this is true button would be shown
        userType!=='Volunteer' && <Button
        onPress={() => props.navigation.navigate("AddEvent")}
        title="Add Event"
      />
      }
      {events.map((event) => {
        return (
          <ListItem
            key={event.id}
            bottomDivider
            onPress={() => {
              props.navigation.navigate("EventDetails", {
                userId: event.id,
              });
            }}
          >
            <ListItem.Chevron />
            <ListItem.Content>
              <ListItem.Title>{event.uId}</ListItem.Title>
              <ListItem.Title>{event.address}</ListItem.Title>
              <ListItem.Title>{event.eName}</ListItem.Title>
            </ListItem.Content>
          </ListItem>
        );
      })}
    </ScrollView>
  );
};

const EventListScreen=（道具）=>{
const[events，setEvents]=useState（[]）；
const[userType，setUserType]=useState（）；
useffect（（）=>{
火基
.firestore（）
.收集（“用户”）
.doc（firebase.auth（）.currentUser.uid）
.get（）
。然后（（doc）=>{
setUserType（doc.data（）.accountType）；
火基
.firestore（）
.收集（“事件”）
.onSnapshot（（querySnapshot）=>{
常量事件=[]；
querySnapshot.docs.forEach（（doc）=>{
const{address，eName}=doc.data（）；
事件。推({
id:doc.id，
地址:，
艾娜，
});
});
设置事件（事件）；
});
});
}, []);
如果（！userType）
返回；
返回(
{
//如果这是真的，按钮将显示
用户类型！=='志愿者'&&props.navigation.navigate（“AddEvent”）}
title=“添加事件”
/>
}
{events.map（（事件）=>{
返回(
{
props.navigation.navigate（“EventDetails”{
userId:event.id，
});
}}
>
{event.uId}
{event.address}
{event.eName}
);
})}
);
};

您可以检查Firestore中的帐户类型是否为

“志愿者”

而不是

“志愿者”

？它是大写的

志愿者

而不是

志愿者

您可以尝试记录

文档数据（）

并共享屏幕截图吗？编辑以显示so@tteumul你试过我的答案了吗？