Unexpected go back on react-navigation

Question

I have a nested stack in my project. Everything works fine but when I click a button that takes you to a page where at first it has to load the user list with useEffect, the page does a navigation.goBack (). If I take useEffect off the page, when I click the button it goes to the right page.

        listaUtenti: async () => {
      setLoad(true);
      getAuth().currentUser.getIdToken(true).then(function(idToken) {
        fetch('http://ipipip/users', {
          method: 'GET',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + idToken,
          }
        }).then((response) => {
          return (response.json())
        }).
        then((response) => {
          console.log(response);
          
          if(response.status === 403){
            throw new Error(response.message);
          }
          setLoad(false);
          })
          .catch(function(error) {
          setLoad(false);
          console.log(error);
          showMessage({
            message: "Attenzione",
            description: String(error),
            type: "danger",
            backgroundColor: '#FF3D71',
            color: '#FFFFFF',
            statusBarHeight: 0,
            style: { borderRadius: 10, marginTop: Constants.statusBarHeight + 10, width: '90%', alignSelf: 'center' }
          });
        })
      }).catch(function(error) {
          setLoad(false);
          console.log(error);
          showMessage({
            message: "Attenzione",
            description: error.message,
            type: "danger",
            backgroundColor: '#FF3D71',
            color: '#FFFFFF',
            statusBarHeight: 0,
            style: { borderRadius: 10, marginTop: Constants.statusBarHeight + 10, width: '90%', alignSelf: 'center' }
          });
        })
    },

In my HomePage i have a button that on press navigate to ListaUtentiScreen

<Button style={{marginVertical:10}} onPress={() => {navigation.navigate('ListaUtenti')}}>Lista utenti</Button>

I call "listaUtenti()" in useEffect

const BackIcon = (props) => (
<Icon {...props} name='arrow-back' />
);

export default function ListaUtentiScreen({navigation}) {

const { tema, listaUtenti } = useContext(AuthContext);
const [utenti, setUtenti] = useState({});

const ref = useRef(null);
useScrollToTop(ref);

const navigateBack = () => {
    navigation.goBack();
  };

const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
);

useEffect(() => {
    const lista = async () => {
      const users = await listaUtenti();
      setUtenti(users);
    };

    lista();
    return () => {
      setUtenti({});
    };
});

return (
  <>
    <TopNavigation title='Lista utenti' alignment='center' accessoryLeft={BackAction}/>
    <Divider/>
    <KeyboardAwareScrollView ref={ref} extraHeight={100} enableOnAndroid={true} scrollEnabled={true} contentContainerStyle={{flexGrow:1}} style={{backgroundColor: tema ? '#151A30' : '#EDF1F7'}}>
    <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: tema ? '#151A30' : '#EDF1F7' }}>
    <Text>Hello</Text>
    </Layout>
    </KeyboardAwareScrollView>
  </>
);

}

if I remove useEffect, it navigates to listaUtenti but if I use useeffect it goes back. If I try to use console.log () to see if the function is used, on the terminal it prints the user list but it goes back anyway

This is a video that show the error

Please provide a code snippet. – EthanNeedsHelpCoding Jul 20 '22 at 22:27 — EthanNeedsHelpCoding, Jul 20 '22 at 22:27

score 0 · Answer 1 · answered Jul 20 '22 at 22:32

Without a code snippet its pretty hard to answer, however my intuition tells me you're doing something like this

<Button onPress={navigation.goBack()}> {Back arrow in the top left corner} </Button>

When you should be doing something like this:

<Button onPress={(e)=>navigation.goBack()}> {Back arrow in the top left corner} </Button>

The difference here is the (e) => inside the onPress/onClick (depending on what framework you're using) without the (e) => the function is called immediately when the button is rendered. Again, not 100% sure without the code snippet

I have a page called "authprovider" where I use createContext to switch functions between different project pages. All work very well but the ones where I use Fetch I can't use their return or as in this case I can't navigate the "UsersList" page because it goes back to the previous screen by itself. — Liborio Riggi, Jul 21 '22 at 16:56

Unexpected go back on react-navigation

1 Answers1