React Native - 从另一个屏幕触发使用效果答案

【问题标题】：React Native - Triggering useeffect from another screenReact Native - 从另一个屏幕触发使用效果
【发布时间】：2021-10-01 07:30:15
【问题描述】：

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

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

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.

【问题讨论】：

标签： react-native state parameter-passing react-navigation

【解决方案1】：

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

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

在 addProduct 屏幕上获取函数

const setReloader = route.params.setReloader;

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

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

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

每当返回该屏幕时都会调用焦点侦听器

【讨论】：

当我尝试更新 setReloader 时，在编辑页面中出现“setReloder 是只读的”错误。

【解决方案2】：

你可以这样做：

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

【讨论】：

它给出了“setReloder 是只读的”错误。
@nogabemist 检查我的更新答案
如何在editpage中使用回调？我这样做了，但什么也没发生。 navigation.navigate('主页', 回调)
它不起作用它只有在我按下编辑按钮时才调用函数。

【解决方案3】：

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

const isFocused = useIsFocused();

嗯，它对我有用。触发。

useEffect not called in React Native when back to screen

【讨论】：