[英]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>
)}
/>)
}
}
我正在制作一個小游戲,並希望在選擇房間中的團隊之前顯示每個團隊中的人員。 如果用戶剛剛創建房間,則團隊自然會空着。 我想根據這種情況做一個條件渲染。 我從另一個組件的 socket.io 連接中獲取數據(我認為這不是很重要,只是說而已。)
而一般返回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>
);
但是,當我嘗試運行該應用程序時,出現以下錯誤:
用戶(...):渲染沒有返回任何內容。 這通常意味着缺少返回語句。 或者,不渲染任何內容,返回 null。
謝謝你。
問題可能是因為你不告訴 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.