使用钩子(setState，usefect)从屏幕上提取重复代码的最佳方法

Question

这个问题似乎有些模糊，我是新的使用钩子，在我的示例中我会很具体，我有3个变量，带有他们的固定器，以及有效的使用效果在他们。该代码基本上向用户询问位置权限并保存其位置。

这件代码在两个不同的屏幕中完全相同，我的问题是，移动所有代码变量和设置器在多大程度上是可行的，并使用效果到第三个文件" 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()
  }, []);

我可以将此代码实例化到另一个文件，y仍然需要声明常数和使用效果，但是我可以将所有登录名移至文件之外的第三个函数？

之外

谢谢！

Answer 1

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

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;

然后在您需要的任何地方导入它们。您仍然必须使用使用效率来启动您的功能。

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之外的固定器，则可以从usePermisos返回。

Answer 2

好吧，我会回答自己的问题。对于任何想知道同一件事的人：

是的，可以将所有代码移出第三个功能。只需在屏幕上使用您需要的所有变量添加返回：

localitzaciohelper.js

import React, {useState, useEffect} from 'react';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
export const demanarLocalitzacio = () => {
  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()
  }, []);
  return [localitzacioActual, localitzacioPermisos, mapRegion]
}

然后在屏幕上您只需在返回之前调用函数：

mapascreen.js

const [localitzacioActual, localitzacioPermisos, mapRegion] = demanarLocalitzacio()

使用效果将具有与屏幕渲染函数直接相同的行为。