React Native - Triggering useeffect from another screen-CodePudding

I have a table that has items in it. When I click a specific item's edit button. It goes to edit page but when I submit an edit of that item. It goes back to main table page but the table page won't be updated. So, I think I need to trigger the useeffect function. To do that I need to update the state in main table page from another screen that is edit page screen.

my apps are not class-based. all of them functional. Here are my codes.

Main Table Page:

  //I created a state to update
  const [reload,
    setReloader] = useState(''); 

   I try to send the state to change it in edit item screen. 
  <TouchableOpacity onPress={() => navigation.navigate('addProduct', [reload])}> 

Edit Item Page:

  const [reload,
    setReloader] = useState(route.params.reload); //I tried to pass state but it didn't work like that.

CodePudding user response：

Pass a function through navigation Pass the function in which you will be updating the state. i.e. setReloader

<TouchableOpacity onPress={() => navigation.navigate('addProduct', {setReloader})}>

On addProduct screen get the function by

const setReloader = route.params.setReloader;

once you have edited simply call the setReloader function on the edit page and then go back to the main screen

Using the navigation lifecycle method. On the main screen, you can add a focus lister

const focusListner = navigation.addListener('focus', () => {
          //call the API to fetch the updated data from the server
        });

Focus listener is called whenever the return to that screen

CodePudding user response：

You can do something like:

//I created a state to update
  const [reload, setReloader] = useState(''); 

  const updateState = (value) => {    
    setReloader(value);
  }

   Send `setReloader` as callback to update on edit screen
  <TouchableOpacity onPress={() => navigation.navigate('addProduct', {callback: updateState})}>

Edit Item Page:

const callback = route.params.callback;

// call `callback` which will update view on parent screen

CodePudding user response：

import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();

Well it is worked for me. To trigger.

useEffect not called in React Native when back to screen