ReactNative react-navigate Drawer screen How can I reset state value to empty string-CodePudding

I try use React Native Navigation in my App. With Stack Navigation set title and uri values successfully updated to params.title and params.uri. But with Drawer navigation the initialization of title and uri run once on first call of DetailsScreen.

import React, { useState, useEffect } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { styles } from '../Styles';
import { store } from '../data/SignalSorage';

export default function DetailsScreen({ navigation, route }) {
    console.log(`Route title:${route.params.title}`);
    console.log(`Route uri:${route.params.uri}`);

    const [title, setTitle] = useState(route.params.title);
    const [uri, setUri] = useState(route.params.uri);

    useEffect(() => {
        setTitle('');
    }, []);

    console.log(`DetailsScreen title:${title}, uri:${uri}`);

    return (
        <View style={styles.container}>
            <View>
                <Text style={styles.input_title}>Title:</Text>
                <TextInput placeholderTextColor="#888" style={styles.input} placeholder="enter title here..." onChangeText={(value) => { setTitle(value); }} value={title} />
            </View>
            <View>
                <Text style={styles.input_title}>Uri:</Text>
                <TextInput placeholderTextColor="#888" style={styles.input} placeholder="enter signal here..." onChangeText={(value) => { setUri(value); }} value={uri} />
            </View>
            <View>
                <Button title='Save element' onPress={() => {
                    store.save({ key: store.getLastKey()   1, title: title, uri: uri });
                    console.log(`title=${title}, uri=${uri}`);
                    navigation.navigate({
                        name: 'HomeScreen',
                        merge: true,
                    });
                }} />
            </View>
        </View>
    );
}

When I return to the Details screen the last typed value appeared in the input, not params.title and params.uri. As if useState had run once. Maybe I missunderstude hooks. Please help me.

[Info] 01-20 10:26:07.072  5733  5811 I ReactNativeJS: Route title:
01-20 10:26:07.072  5733  5811 I ReactNativeJS: Route uri:


[Info] 01-20 10:26:07.073  5733  5811 I ReactNativeJS: DetailsScreen title:Test, uri:


[Info] 01-20 10:26:07.153  5733  5811 I ReactNativeJS: DetailsScreen focused.

CodePudding user response：

I solved the problem with focuse event:

export default function DetailsScreen({ navigation, route }) {
    console.log(`Route title:${route.params.title}`);
    console.log(`Route uri:${route.params.uri}`);

    const [title, setTitle] = useState(route.params.title);
    const [uri, setUri] = useState(route.params.uri);

    useEffect(() => {
        const unsubscribe = navigation.addListener('focus', () => {
            setTitle(route.params.title);
            setUri(route.params.uri);
        });
        return unsubscribe;
    }, [navigation]);

    console.log(`DetailsScreen title:${title}, uri:${uri}`);

    return (
        <View style={styles.container}>
            <View>
                <Text style={styles.input_title}>Title:</Text>
                <TextInput placeholderTextColor="#888" style={styles.input} placeholder="enter title here..." onChangeText={(value) => { setTitle(value); }} value={title} />
            </View>
            <View>
                <Text style={styles.input_title}>Uri:</Text>
                <TextInput placeholderTextColor="#888" style={styles.input} placeholder="enter signal here..." onChangeText={(value) => { setUri(value); }} value={uri} />
            </View>
            <View>
                <Button title='Save element' onPress={() => {
                    store.save({ key: store.getLastKey()   1, title: title, uri: uri });
                    console.log(`title=${title}, uri=${uri}`);
                    navigation.navigate({
                        name: 'HomeScreen',
                        merge: true,
                    });
                }} />
            </View>
        </View>
    );
}