javascript - 条件渲染不起作用 / React Native
问题描述
const [usersOfTeam1, setUsersOfTeam1] = useState([])
const [usersOfTeam2, setUsersOfTeam2] = useState([])
socket.on("update users", ({ users, team1, team2 }) => { // receives the teams information from the server
setUsersOfTeam1(team1)
setUsersOfTeam2(team2)
setUsersInTheRoom(users)
})
function Users(team) {
if (team === 1) {
if (usersOfTeam1.length === 0) {
return (<Text>(Empty)</Text>)
}
else {
return (<FlatList
data={usersOfTeam1}
renderItem={({ item }) => (
<Text>{item.username}</Text>
)}
/>)
}
}
else if (team === 2) {
if (usersOfTeam2.length === 0) {
return (<Text>(Empty)</Text>)
}
else {
return (<FlatList
data={usersOfTeam2}
renderItem={({ item }) => (
<Text>{item.username}</Text>
)}
/>)
}
}
我正在制作一个小游戏,并希望在选择房间中的团队之前显示每个团队中的人员。如果用户刚刚创建了房间,那么团队自然是空的。我想根据这种情况进行条件渲染。我从另一个组件的 socket.io 连接中获取数据(我认为这不是很重要,只是说。)
而一般的返回状态是这样的:
return (
<ImageBackground source={image} resizeMode="cover" style={styles.backgroundContainer}>
<View style={styles.teamsContainer}>
<View style={styles.team}>
<View style={styles.userList}>
<Text style={styles.teamsTexts}>TEAM 1</Text>
<Users team={1} />
</View>
<View style={styles.joinInteractive}>
<TouchableOpacity
onPress={() => {
socket.emit("team selected", { team: 1 })
navigation.navigate("Game")
}}>
<Text style={{ fontFamily: "Abel", fontSize: 30 }}>Join</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.team}>
<View style={styles.userList}>
<Text style={styles.teamsTexts}>TEAM 2</Text>
<Users team={2} />
</View>
<View style={styles.joinInteractive}>
<TouchableOpacity
onPress={() => {
socket.emit("team selected", { team: 2 })
navigation.navigate("Game")
}}>
<Text style={{ fontFamily: "Abel", fontSize: 30 }}>Join</Text>
</TouchableOpacity>
</View>
</View>
</View>
</ImageBackground>
);
但是,当我尝试运行应用程序时,出现以下错误:
用户(...):渲染没有返回任何内容。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null。
谢谢你。
解决方案
问题可能是因为如果团队既不是 1 也不是 2,您没有告诉函数返回任何内容。
if (team === 1) { // First condition
if (usersOfTeam1.length === 0) {
return (<Text>(Empty)</Text>)
}
else {
return (<FlatList
data={usersOfTeam1}
renderItem={({ item }) => (
<Text>{item.username}</Text>
)}
/>)
}
}
else if (team === 2) { // Second condition
if (usersOfTeam2.length === 0) {
return (<Text>(Empty)</Text>)
}
else {
return (<FlatList
data={usersOfTeam2}
renderItem={({ item }) => (
<Text>{item.username}</Text>
)}
/>)
}
// HERE --- What is the return statement if both conditions fail to meet the requirements?
推荐阅读
- ios - 尝试覆盖支持安全编码但不编译
- java - 如何解决以下编码练习
- python - 如何使用 conda 安装 pytorch 和 fastai
- javascript - Vuejs 在多个组件之间移动数据
- go - golang 中的 len() 线程安全吗?
- javascript - 使用jquery为多个元素制作交错淡入淡出循环
- nuxt.js - 为什么我必须在我的 Nuxt.js 插件中显式调用 jquery 和 bootstrap,当它在供应商中全局加载时?
- c# - 如何从 Windows.Form 调用 UserControl 的方法
- python-3.x - Python 3.x - 如何使用请求补丁更新 Google Drive 上的 CSV 文件
- javascript - ReactJS 教程井字游戏