react - Passando parametro navigation do stack navigation pra componente filho - Stack Overflow em Português
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
export default function Main({navigation}) {
<TouchableOpacity style={styles.touch} onPress={logout}>
<Image source={Logout} style={styles.logoutImage}></Image>
<Text style={styles.outText}>Sair</Text>
{admin && <Admin navigation={navigation} />}
perguntada 24/10/2020 às 20:52
O componente filho já deve ter o navigation, já testou não passar e só recuperar?
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
25/10/2020 às 13:16
você deu um console.log(props) e não tem?
25/10/2020 às 13:23
Isso eu n tentei, eu costumo desestruturar as props, vou tentar isso pra ver sem desestruturar
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
25/10/2020 às 13:44
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:
{/* aqui usa a prop `navigation` */}
Pra usar o hook useNavigation, é da mesma forma que os outros hooks:
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.
editada 29/10/2020 às 16:06
respondida 29/10/2020 às 15:49
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
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');
{admin && <Admin navegar={navegaAdmin} />}
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} />
respondida 29/10/2020 às 15:17
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.