#reactjs #typescript #react-native #react-hooks #react-navigation
Вопрос:
Я хочу сбросить состояние (вернуться в исходное состояние) в функциональном компоненте при навигации по navigation.navigate() нему .
Допустим, пользователь переходит на A экран и задано некоторое состояние, затем он нажимает кнопку на этом экране и переходит на B экран через navigation.navigate('B );`
Проблема, с которой я сталкиваюсь, появляется, когда пользователь нажимает другую кнопку, чтобы вернуться на A экран (снова через navigation.navigate('A'); ). A Компонент в этот момент все еще сохраняет все состояние с момента его первоначального монтирования. Я хочу, чтобы состояние было сброшено в исходное состояние для A компонента, чтобы пользователям приходилось начинать любой процесс заново с самого начала.
Есть ли способ добиться этого? Я попытался немного прислушаться к этой навигации и сбросить состояние с помощью нескольких set крючков, но это кажется неправильным и не очень хорошо работает.
Изменить:
Кто-то попросил образец кода, поэтому краткий пример приведен ниже. Проблема в том, что если кто-то переходит к компоненту A и нажимает вызывающую кнопку setInput , которая выводит текст над кнопками, он затем нажимает другую кнопку с надписью Go To B , которая при навигации по реакции приводит их к компоненту B . Если затем они продолжат и нажмут Go To A , а затем перейдут обратно к компоненту A , A состояние компонента по- input прежнему будет равно Hello . Я хочу, чтобы он был сброшен обратно в пустую строку (надеюсь, без необходимости звонить setInput("") .
import React, { useState } from "react"; import {Center, Button, Text} from "native-base"; const A = ({ route, navigation }) =gt; { const [input, setInput] = useState(""); return ( lt;Centergt; lt;Textgt;{input}lt;/Textgt; lt;Button onPress=(() =gt; { setInput("Hello") })gt;Click Me For Wordslt;/Buttongt; lt;Button onPress=(() =gt; { navigation.navigate("B") })gt;Go To Blt;/Buttongt; lt;/Centergt; ); }; const B = ({ route, navigation }) =gt; { return ( lt;Centergt; lt;Button onPress=(() =gt; { navigation.navigate("A") })gt;Go To Alt;/Buttongt; lt;/Centergt; ); }; Комментарии:
1. Вы можете показать код ?
2. Пожалуйста, поделитесь фрагментом кода, чтобы лучше понять. У вас есть реквизит
isFocused, который называется «Навигация». Проверьте это и обновите свое состояние, когда ваш экран расфокусируется.3. @ImanpalSingh Сейчас я привел пример, извините, что не включил его.
Ответ №1:
Вы можете попробовать это, оно установится setInput("") , когда вы вернетесь screen A из screen B
useEffect(() =gt; { const unsubscribe = navigation.addListener('focus', () =gt; { setInput(""); }); return unsubscribe; }, [navigation]); import React, { useState, useEffect } from "react"; import {Center, Button, Text} from "native-base"; const A = ({ route, navigation }) =gt; { const [input, setInput] = useState(""); useEffect(() =gt; { const unsubscribe = navigation.addListener('focus', () =gt; { setInput(""); }); return unsubscribe; }, [navigation]); return ( lt;Centergt; lt;Textgt;{input}lt;/Textgt; lt;Button onPress=(() =gt; { setInput("Hello") })gt;Click Me For Wordslt;/Buttongt; lt;Button onPress=(() =gt; { navigation.navigate("B") })gt;Go To Blt;/Buttongt; lt;/Centergt; ); }; const B = ({ route, navigation }) =gt; { return ( lt;Centergt; lt;Button onPress=(() =gt; { navigation.navigate("A") })gt;Go To Alt;/Buttongt; lt;/Centergt; ); }; Ответ №2:
Вы можете вызвать метод жизненного цикла React Native следующим образом:
componentDidMount() { console.log('onResume') //call your method here } Ответ №3:
Я нашел ответ на свой собственный вопрос. В принципе, если вы хотите отключить/переустановить компонент (что приведет к сбросу его состояния), вы можете это сделать:
const resetAction = CommonActions.reset({ index: 0, routes: [{ name: "A" }] }); navigation.dispatch(resetAction);