嵌套对象的默认属性未正确显示

Question

我想为组件中的嵌套prop使用默认字符串，但是以下未显示默认值：

export default SuccessModal = ({ 
    completed, 
    setCompleted, 
    navigation, 
    isOpen, 
    setModal 
}) => {
    const { data, error } = completed && completed
    const onPressHandler = () => {
        setModal(false)
        navigation.navigate('Profile')
    }

    return (
        <View style={styles.container}>
            <Modal
                animationType="fade"
                transparent={false}
                visible={true}
                onRequestClose={() => {
                    Alert.alert('Modal has been closed.');
                }}>
                <View style={styles.modal}>
                    <View>
                        {error ? <Text style={styles.mainText}>Sorry, something went wrong!</Text> 
                               : <Text style={styles.mainText}>Your {data.createPost && data.createPost.title} has been posted!</Text>}

                        <TouchableHighlight
                            style={styles.button}
                            onPress={onPressHandler}>
                            <Text style={styles.buttonText}>Hide Modal</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

SuccessModal.propTypes = {
    completed: PropTypes.shape({
        data: PropTypes.shape({
            createPost: PropTypes.shape({
                title: PropTypes.string.isRequired
            })
        })
    }),
    setCompleted: PropTypes.func,
    navigation: PropTypes.object,
    isOpen: PropTypes.bool,
    setModal: PropTypes.func,
}

SuccessModal.defaultProps = {
    completed: {
        data: {
            createPost: {
                title: "post",
            }
        }
    }
}

我希望嵌套在title对象内部的completed显示“ post”，但是在渲染组件时，该值不显示，而是显示空白

Answer 1

您总是可以像下面这样使用javascript评估来尝试在代码中实现它：

<Text style={styles.mainText}>Your {(data.createPost && data.createPost.title) || "post"} has been posted!</Text>}