条件渲染不起作用 / React Native

Question

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状态是这样的：

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

但是，当我尝试运行应用程序时，出现以下错误：

Users(...)：渲染中没有 returned。这通常意味着缺少 return 语句。或者，为了不渲染任何内容，return null.

谢谢。

Answer 1

问题可能是因为如果 team 既不是 1 也不是 2，您没有告诉函数 return 任何东西。

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?

条件渲染不起作用 / React Native

Conditional Rendering Doesn't Work / React Native

javascript

reactjs

typescript

react-native

rendering