从 modal-React native 更新信息

Question

在我的 react native 应用程序中，我以这种方式显示从服务器获取的信息：

所以当我点击update profil 时，我会显示一个带有文本输入的模式，以便让用户有机会更改他的个人资料信息。模态如下所示：

现在我已经创建了一个 Fetch Post 函数，当我单击按钮 update 时，它会将静态信息发送到服务器并关闭模式。但在我退出并返回之前，个人资料页面不会刷新。

我的问题是：从文本输入中获取值的最佳方法是什么，通过邮寄方式发送它们。并在模态关闭后刷新屏幕？我应该使用formik吗？

这是我的代码：

export default function MprofilScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    const [Data, setData] = useState([]);
    useEffect(() => {

        fetch('******')
            .then((response) => response.json())
            .then((res) => {
                console.log("repooooonse")
                console.log(res)
                setData(res)
            })
            .done();
    }, []);
    return (
        <View style={{ flex: 1, backgroundColor: 'white' }} >
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                }}>
                <View style={styles.modalView}>


                    <TouchableOpacity
                        style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                        onPress={() => {
                            setModalVisible(!modalVisible);
                        }}
                    >
                        <Text style={styles.textStyle}>close</Text>
                    </TouchableOpacity>
                    <ScrollView>
                        <Text style={styles.text}>Nom:</Text>
                        <TextInput style={styles.text_input} placeholder="nom" />
                        ....
                        <Text style={styles.text}>Ville :</Text>
                        <TextInput style={styles.text_input} placeholder="Ville " />
                        <TouchableOpacity
                            style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                            onPress={() => {
                                setModalVisible(!modalVisible);
                            }}
                        >
                            <Text style={styles.textStyle}>Delete</Text>
                        </TouchableOpacity>
                    </ScrollView>
                </View>

            </Modal>
            <TouchableOpacity style={styles.btn}
                onPress={() => {
                    setModalVisible(true);
                }}>
                <Text style={{ color: 'white', fontSize: 15 }}> Update profil</Text>
            </TouchableOpacity>
            <View >


<View style={styles.main_container}>
    <Text style={styles.text}>Nom:</Text>
    <Text style={styles.text1}>{Data.nom}</Text>

</View>
.....
<View style={styles.main_container}>
    <Text style={styles.text}>Ville:</Text>
    <Text style={styles.text1}> {Data.ville}</Text>

</View>


</View>

        </View>
    );
}

我是 react native 的新手，非常感谢您的帮助！

Answer 1

我假设您在该配置文件页面的 componentDidMount 中有获取详细信息，并且由于 modal 也驻留在其中，因此页面不会刷新。您可以做的是在 modalClose 上再次调用该函数。

假设你有，

getDetails = () => {
.... fetch details
}

在componentDidMount 中，您的调用方式如下：

componentDidmount(){
this.getDetails();
}

同样，您可以在 modalClose 更新后调用相同的函数。

onModalClose = () => {
this.getDetails()
}

希望它清楚。如有疑问，请随意