gpt4 book ai didi

javascript - 使用钩子(Hook)(setState、useEffect)从屏幕中提取重复代码的最佳方法?

转载 作者:行者123 更新时间:2023-12-02 23:23:07 26 4
gpt4 key购买 nike

这个问题可能看起来有点模糊,我是新使用钩子(Hook)的人,我将在我的示例中非常具体,我有 3 个变量及其 setter ,以及适用于它们的 useEffect。该代码基本上询问用户位置权限并保存他的位置。

这段代码在两个不同的屏幕中重复使用完全相同,我的问题是,在多大程度上可以移动所有代码变量和 setter ,并将效果使用到第三个文件“helper”。

这是一段代码:

  const [localitzacioActual, setlocalitzacioActual] = useState(null);
const [localitzacioPermisos, setlocalitzacioPermisos] = useState(null);
const [mapRegion, setMapRegion] = useState(null);

useEffect( () => {
const demanarPermisos = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
setlocalitzacioPermisos('Permisos denegats')
} else {
setlocalitzacioPermisos(true)
}
let location = await Location.getCurrentPositionAsync({});
setlocalitzacioActual(JSON.stringify(location))
setMapRegion({ latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0022, longitudeDelta: 0.0121 });
}
demanarPermisos()
}, []);

到什么程度我可以将此代码实例化到另一个文件,仍然需要声明常量和使用效果,但我可以将所有登录移动到文件外部的第三个函数?

谢谢!

最佳答案

您可以将所有状态变量和函数放入自定义 Hook 中。您的自定义 Hook 将为您处理状态更改。

permisos.js

import { useState } from 'react';

const usePermisos= () => {
const [localitzacioActual, setlocalitzacioActual] = useState(null);
const [localitzacioPermisos, setlocalitzacioPermisos] = useState(null);
const [mapRegion, setMapRegion] = useState(null);

const demanarPermisos = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
setlocalitzacioPermisos('Permisos denegats')
} else {
setlocalitzacioPermisos(true)
}
let location = await Location.getCurrentPositionAsync({});
setlocalitzacioActual(JSON.stringify(location))
setMapRegion({ latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0022, longitudeDelta: 0.0121 });
};

return [
localitzacioActual,
localitzacioPermisos,
mapRegion,
demanarPermisos,
];
};

export default usePermisos;

然后将它们导入到需要的地方。您仍然需要使用 useEffect 来触发您的函数。

screen1.js

import React, { useEffect } from 'react';
import usePermisos from './usePermisos';

const screen1 = () => {
const [
localitzacioActual,
localitzacioPermisos,
mapRegion,
demanarPermisos,
] = usePermisos();

useEffect(demanarPermisos, []);

return (
<div>React Functional Component</div>
);
};

export default screen1;

如果您需要 demanarPermisos 之外的 setter,您可以从 usePermisos 返回它们。

关于javascript - 使用钩子(Hook)(setState、useEffect)从屏幕中提取重复代码的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56858437/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com