javascript - React Native navigation.navigate params not updating - Stack Overflow

admin管理员组

文章数量:1307005

I try to navigate from home screen to detail screen using navigation.navigate(). When the first time i click button to navigate it works fine, but after that when i go back from detail to home and click another item to see the detail, the params on detail screen is not changed (its still the params of the 1st click). Here my code :

<TouchableNativeFeedback
  key={index}
  onPress={() => {
    navigation.navigate('PenghuniScreen', {
      screen: 'DetailPenghuni',
      params: {
        penghuni: item,
      },
    });
  }}></TouchableNativeFeedback>;

item is object from map loop . i try to console log using react navigation usefocuseffect and the params not changin after 1st click.

useFocusEffect(
    React.useCallback(() => {
      console.log('My params:', route.params.penghuni);
      setPenghuni(route.params.penghuni);
      return () => {
        // source.cancel('Api Canceled');
        console.log('tutup detail penghuni');
      };
    }, []),
  );

anyone got solution for this?

I try to navigate from home screen to detail screen using navigation.navigate(). When the first time i click button to navigate it works fine, but after that when i go back from detail to home and click another item to see the detail, the params on detail screen is not changed (its still the params of the 1st click). Here my code :

<TouchableNativeFeedback
  key={index}
  onPress={() => {
    navigation.navigate('PenghuniScreen', {
      screen: 'DetailPenghuni',
      params: {
        penghuni: item,
      },
    });
  }}></TouchableNativeFeedback>;

item is object from map loop . i try to console log using react navigation usefocuseffect and the params not changin after 1st click.

useFocusEffect(
    React.useCallback(() => {
      console.log('My params:', route.params.penghuni);
      setPenghuni(route.params.penghuni);
      return () => {
        // source.cancel('Api Canceled');
        console.log('tutup detail penghuni');
      };
    }, []),
  );

anyone got solution for this?

• javascript
• react-native

Share Improve this question Follow asked Oct 3, 2020 at 17:13 imamseptianimamseptian 9122 silver badges66 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You forgot to add the route dependency to your useCallback, so it is getting the old value.

Try adding [route]:

React.useCallback(() => {
      console.log('My params:', route.params.penghuni);
      setPenghuni(route.params.penghuni);
      return () => {
        // source.cancel('Api Canceled');
        console.log('tutup detail penghuni');
      };
}, [route]), 

I suggest you adding the eslint for hooks to your project, to detect missing dependecies.

Observation: Why don't you pass these values though the navigation params instead of using useFocusEffect?

navigation.navigate('DetailPenghuni', { penghuni: item1 }) // item1 press 
navigation.navigate('DetailPenghuni', { penghuni: item2 }) // item2 press

If you need to cancel something you can always use the useEffect clean callback called automatically when you close a screen.

You can use route.params.penghuni directly instead of setting setPenghuni(route.params.penghuni)

useEffect(() => {
      console.log('My params:', route.params.penghuni);
      // setPenghuni(route.params.penghuni); 
      return () => {
        // source.cancel('Api Canceled');
        console.log('tutup detail penghuni');
      };
}, [route.params?.penghuni]),

本文标签： javascriptReact Native navigationnavigate params not updatingStack Overflow