[英]Conditional Rendering Doesn't Work / 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>
)}
/>)
}
}
I am making a small game and want to display the people in the each team before selecting teams in a room.我正在制作一个小游戏,并希望在选择房间中的团队之前显示每个团队中的人员。 If the user just created the room, the teams will be empty naturally.
如果用户刚刚创建房间,则团队自然会空着。 I want to make a conditional rendering according to this situation.
我想根据这种情况做一个条件渲染。 I get the data from a socket.io connection from another component (I don't think it is very important but just saying.)
我从另一个组件的 socket.io 连接中获取数据(我认为这不是很重要,只是说而已。)
And the general return state is like this:而一般返回state是这样的:
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>
);
However, when I try to run the application, I get the following error:但是,当我尝试运行该应用程序时,出现以下错误:
Users(...): Nothing was returned from render.用户(...):渲染没有返回任何内容。 This usually means a return statement is missing.
这通常意味着缺少返回语句。 Or, to render nothing, return null.
或者,不渲染任何内容,返回 null。
Thank you.谢谢你。
The problem is probably because you dont tell the function to return anything if team is neither 1 or 2.问题可能是因为你不告诉 function 在 team 既不是 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?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.