0

Sou novo em react native e estou construindo um app onde preciso repedir varias vezes o mesmo código com apenas algumas diferenças, então logico que eu estou criando componentes pra isso, porem em um dos componentes tem um botão e quando pressionado ele navegue ate outra rota, geralmente quando preciso fazer isso o stack navigation sempre passa como props a propriedade navigation e usamos da seguinte maneira navigation.navigate('nome-da-rota'), porem eu preciso usar essa propriedade dentro do componente filho, porem todas vez que tento isso recebo o erro ERROR Warning: Cannot update a component from inside the function body of a different component.

O meu componente esta em outro arquivo

Meu código:

export default function Main({navigation}) {
   return (
    <>
      <View style={styles.header}>
        <TouchableOpacity style={styles.touch} onPress={logout}>
          <Image source={Logout} style={styles.logoutImage}></Image>
          <Text style={styles.outText}>Sair</Text>
        </TouchableOpacity>
      </View>
      <ScrollView>
        {admin && <Admin navigation={navigation} />}
      </ScrollView>
    </>
  )
}
14
  • O componente filho já deve ter o navigation, já testou não passar e só recuperar?
    – novic
    25/10/2020 às 12:19
  • Já sim, ele n tem, aliás tentei até criar uma Stack só dele pra ele receber esse parametro, mas ao q parece esse parametro só é passado quando a rota é chamada, n renderizada
    – Geovane
    25/10/2020 às 13:16
  • você deu um console.log(props) e não tem?
    – novic
    25/10/2020 às 13:23
  • Isso eu n tentei, eu costumo desestruturar as props, vou tentar isso pra ver sem desestruturar
    – Geovane
    25/10/2020 às 13:38
  • <Admin navigation={navigation} /> é que to falando será que precisa passar esse props, se poderia retirar e testar também navigation={navigation} já que os componentes estão envolvidos pelo navegação
    – novic
    25/10/2020 às 13:44

2 Respostas 2

2

Hook useNavigation

Uma outra alternativa, além da dada pelo @LucasSouza, é usar o hook useNavigation. Como a própria documentação diz, ele é mais útil quando você não quer passar a prop navigation para um componente filho, ou quando você tem uma árvore de componentes muito aninhada, onde você teria que ficar passando a prop pra cada componente da árvore, até chegar no ponto onde você quer. Por exemplo:

<Main>
  <Header>
    <NavList>
       {/* aqui usa a prop `navigation` */}
       <NavLink />
    </NavList>
  </Header>
</Main>

Pra usar o hook useNavigation, é da mesma forma que os outros hooks:

import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function MyButton() {
    const navigation = useNavigation();

    return (
        <Button
            title="Click me!"
            onPress={() => navigation.navigate('MyRoute')}
        />
    );
}

Você importa ele e faz a chamada de função.

A mensagem de alerta

Outra a coisa a se notar, é que a mensagem de erro:

ERROR Warning: Cannot update a component from inside the function body of a different component.

Aparece quando você muda um estado de um componente em renderização, a partir de outro componente, conforme pode se ver na documentação do React.

Então, dependendo de como você está fazendo, ou talvez de como o react-navigation funciona, o estado de um componente está sendo mudado por outro, de uma forma inapropriada.

1
  • Cara perfeito, eu não fazia ideia que tinha um Hook pra isso separado, e olha que pesquisei hein, mas parece que não o suficiente, muito obrigado
    – Geovane
    30/10/2020 às 11:21
1

Uma alternativa pro seu caso seria centralizar no seu componente Main as funções de navegação e descer essas funções via ligação direta, exemplo:

export default Main = ({navigation}) => {
    const navegaAdmin = navigation => navigation.navigate('nome-da-rota');
    
    return (
     <>
       <View style={styles.header}>
         <TouchableOpacity style={styles.touch} onPress={logout}>
           <Image source={Logout} style={styles.logoutImage}></Image>
           <Text style={styles.outText}>Sair</Text>
         </TouchableOpacity>
       </View>
       <ScrollView>
         {admin && <Admin navegar={navegaAdmin} />}
       </ScrollView>
     </>
   )
 }

E no seu componente Admin no botão ficaria algo assim:

<TouchableOpacity onPress={navegar} />

Caso não queira fazer o destructing das props no seu componente Admin então o botão de navegação ficaria assim:

<TouchableOpacity onPress={props.navegar} />
1
  • Cara muito obrigado, a sua resposta funcionou mt bem, eu estava fazendo meio certo então né, mas tinha q passar a função toda né ja com o nome da rota.
    – Geovane
    30/10/2020 às 11:19

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 .