嵌套对象的默认道具未正确显示

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",
            }
        }
    }
}

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

Answer 1

您总是可以尝试使用 javascript 评估在代码中实现它，如下所示：

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

嵌套对象的默认道具未正确显示

The default prop for a nested object is not being displayed properly

reactjs

react-native

nested

typechecking

react-proptypes