React Native - 从另一个屏幕触发useEffect

Question

我有一个 table，里面有物品。当我单击特定项目的编辑按钮时。它进入编辑页面，但是当我提交对该项目的编辑时。它返回到主 table 页面，但 table 页面不会更新。所以，我想我需要触发useEffect函数。为此，我需要从编辑页面屏幕的另一个屏幕更新主 table 页面中的状态。

我的应用不是基于 class 的。所有这些功能。这是我的代码。

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.

Answer 1

您可以这样做：

//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})}>

编辑项目页面：

const callback = route.params.callback;

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

Answer 2

通过导航传递函数传递您将在其中更新状态的函数。即 setReloader

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

在添加产品屏幕上通过

获取函数

const setReloader = route.params.setReloader;

编辑完成后，只需调用编辑页面上的 setReloader 函数，然后返回主屏幕

使用导航生命周期方法。在主屏幕上，您可以添加焦点列表

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

每当 return 到该屏幕时调用焦点侦听器

Answer 3

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

const isFocused = useIsFocused();

好吧，它对我有用。触发。

React Native - 从另一个屏幕触发useEffect

React Native - Triggering useeffect from another screen

state

parameter-passing

react-native

react-navigation