React 不是在 JSX 中渲染值

Question

我正在 React-native 上制作一个应用程序，我的屏幕代码看起来像这样

const flow_array = ['name', 'age', 'gender', 'interested_gender', 'photos']
class UserInfoInitial extends PureComponent {
state = {
    toView: flow_array[0]
}
render() {
    const {toView} = this.state
    let currentlyViewing = null
    switch (toView) {
        case 'name':
            currentlyViewing = (
                <View style={styles.subJuniorClass}>
                    <Text> Hello Name </Text>
                </View>
            )
        case 'age': 
                currentlyViewing = (
                    <View> 
                        <Text> Hello Age </Text>
                    </View>
                )
        case 'gender': 
                currentlyViewing = (
                    <View> 
                            <Text> Gender </Text>
                    </View>
                )
        case 'interested_gender': 
                currentlyViewing = (
                    <View> 
                        <Text> Interested Gender</Text>
                    </View>
                )
        case 'photos':
                currentlyViewing = (
                    <View> 
                        <Text> Photos </Text>
                    </View>
                )
        default:
                currentlyViewing = null
    }
    return ( 
        <View>
           <View style={styles.subJuniorClass}>
               <Text> Hello Name </Text>
             </View>
            {currentlyViewing}
        </View>
    )
    }
}
export default UserInfoInitial

现在，上面的代码没有显示，当前显示的代码，而是只显示一次hello name。有人可以帮助我弄清楚我可能做错了什么吗？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

您应该将 break 语句添加到案例块中。正在发生的事情是它正在下降到交换机的默认块并分配当前查看回空

Answer 2

我认为问题是你的开关大小写语句。它始终默认返回null，通过在每个 case 语句中添加 break 来更正它，例如：

switch (toView) {
    case 'name':
        currentlyViewing = (
            <View style={styles.subJuniorClass}>
                <Text> Hello Name </Text>
            </View>
        )
        break;
    case 'age': 
        currentlyViewing = (
            <View> 
                <Text> Hello Age </Text>
            </View>
        )
        break;
    case 'gender': 
        currentlyViewing = (
            <View> 
                    <Text> Gender </Text>
            </View>
        )
        break;
    case 'interested_gender': 
        currentlyViewing = (
            <View> 
                <Text> Interested Gender</Text>
            </View>
        )
        break;
    case 'photos':
        currentlyViewing = (
            <View> 
                <Text> Photos </Text>
            </View>
        )
        break;
    default:
        currentlyViewing = null
        break;
}