React native 当在每个组件上安装或更改组件时，是否有适当的方式发出请求

我想调用一个api请求

• 组件安装时
• 跳屏时

这是api示例代码

{
   "api_update_list": {
      "menu": "2021-04-10 04:00:24",
      "posts": "2021-04-10 04:00:34",
      "category": "2021-04-10 04:00:34",
      "products": "2021-04-10 04:00:34",
      "wishlist": "2021-04-10 04:00:34",
      "collection": "2021-04-10 04:00:34",
      "hot_items": "2021-04-10 04:00:34",
      "people": "2021-04-10 04:00:34"
   }
}

我之所以想调用该api，是因为我想检查脱机数据，原因是更新与否。我用react persist保存所有数据。假设我有4个分量。（实际上，我可能有很多组件）

const ScreenA=（）=>{
const dispatch=usedpatch（）；
const appStatus=useSelector（state=>state.app.status）；//它来自redux，默认值为idle
useffect（（）=>{
如果（appStatus==“空闲”&&isConnected）{
dispatch（fetchAppData（））；//数据由CreateSynchThunk发送
}
}，[appStatus]）
返回(
屏幕A
)
}

const ScreenB=（）=>{
const dispatch=usedpatch（）；
const appStatus=useSelector（state=>state.app.status）；//它来自redux，默认值为idle
useffect（（）=>{
dispatch（statusUpdate（'idle'）；//我必须在每个这样的组件中重置idle才能再次请求
}，[appStatus]）
返回(
屏幕B
)
}

constscreenC=（）=>{
const dispatch=usedpatch（）；
const appStatus=useSelector（state=>state.app.status）；//它来自redux，默认值为idle
useffect（（）=>{
dispatch（statusUpdate（'idle'）；//我必须在每个这样的组件中重置idle才能再次请求
}，[appStatus]）
返回(
屏幕C
)
}

注意

• 如果我将数据保存在异步存储中，我不想再次请求数据
• 我会通过检查DataAPI中的日期和时间来决定是否应该请求数据（api格式示例代码在上面）

---

请让我知道您在这种情况下的经历。如果我理解正确，您希望对每次路线更改进行验证。 我的建议是使用高级侦听器，这样就不需要在每个屏幕组件上重复代码

我假设您正在为您的路线使用

react导航

lib，在这种情况下，您可以执行以下操作：

function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => {
        // here you can call your validations and update your data
        // it will be called everytime the navigation state changes even on tabs switch
      }}
      initialState={initialState}
    >
      {/* ... */}
    </NavigationContainer>
  );
}

函数应用程序（）{
返回(
{
//在这里，您可以调用验证并更新数据
//每次导航状态更改时，甚至在切换选项卡时，都会调用它
}}
initialState={initialState}
>
{/* ... */}
);
}

我用最常用的导航库展示了这个示例，但是大多数导航库都有一个等价的函数

有关此回调的详细信息，请执行以下操作：

---

您是否研究过useFocusEffect？

const ScreenB = () => {
  const dispatch = useDispatch();
  const appStatus = useSelector(state => state.app.status); //it is from redux with default value idle

    useEffect(() => {
        dispatch(statusUpdate('idle')); //I have to reset idle in every component like that to request again
    }, [appStatus])

    return(
        <Text>Screen B</Text>
    )
}

const ScreenC = () => {
  const dispatch = useDispatch();
  const appStatus = useSelector(state => state.app.status); //it is from redux with default value idle

    useEffect(() => {
        dispatch(statusUpdate('idle')); //I have to reset idle in every component like that to request again
    }, [appStatus])

    return(
        <Text>Screen C</Text>
    )
}

function App() {
  return (
    <NavigationContainer
      onStateChange={(state) => {
        // here you can call your validations and update your data
        // it will be called everytime the navigation state changes even on tabs switch
      }}
      initialState={initialState}
    >
      {/* ... */}
    </NavigationContainer>
  );
}