0

Estou desenvolvendo um App em ReactNative utilizando Expo, porém não consigo atualizar o useEffect(() => {}, []) da rota anterior vinda de navigation.goBack().

Exemplo:

Aqui tempo a página Index.

function Index(){
  const navigation = useNavigation();
  useEffect({
     ...
  }, []);
  return(
    <View>
      <TouchableOpacity onPress={() => navigation.navigate('Info')}>
        Index
      </TouchableOpacity>
    </View>
  )
}

Aqui virá a página Info

function Info(){
  const navigation = useNavigation();
  return(
    <View>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        Info
      </TouchableOpacity>
    </View>
  )
}

Acontece que no momento que volta para Index vindo da página Info o useEffect da página Index não se atualiza.

Existe alguma forma de fazer esses hooks atualizar?

Pacotes instalados:

  • expo: 37.0.3,
  • expo-cli: 3.18.0,
  • @react-navigation/native: 5.1.5,
  • node: v12.13.0,
1

2 Respostas 2

1

O evento deve ser criado sim com useEffect mas, o evento é do componente de navegação instalado no projeto @react-navigation/native: 5.1.5, seguindo o código de exemplo contido na documentação:

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

Pode configurar 3 eventos: focus ( Este evento é emitido quando a tela entra em foco), blur ( Este evento é emitido quando a tela fica desfocada) e state ( Este evento é emitido quando o estado do navegador muda) e no seu caso da pergunta é o evento focus.

0

A maneira simples de fazer isso é exatamente como foi dito pelo 'Virgilio Novic'. Em resumo, na tela que você deseja voltar, no useEffect você escreve:

const [load,setLoad] = useState(true)

useEffect(()=>{
   //Chamada de outras funções
   navigation.addListener('focus', ()=>setLoad(!load))
},[load, navigation])

Eu tenho um estado 'load' para carregar as funções todas as vezes que eu precisar. Cada vez que 'load' mudar, o 'useEffect' é chamado. No caso, como o navigation.addListener('focus',...) está sendo chamado quando a minha tela volta, eu faço com que ele mude o 'load', fazendo com que o meu 'useEffect' recarregue todas as minhas funções.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .