Как я могу вызвать функцию в файле контекста React native перед вызовом другой функции?

#reactjs #react-native #react-hooks

#reactjs #react-native #реагирующие крючки

Вопрос:

Я пытаюсь получить свою текущую позицию и получить несколько списков кафе вокруг меня.

Я создал getLocation функцию и импортирую ее в свой файл контекста CafeContext . Однако я не могу получить позицию до получения списка кафе.

Иногда это срабатывает, когда я устанавливаю широту / длину в диапазоне [37.~~, 125.~~].

Это getLocation

 import { useState, useEffect } from "react";
import * as Location from "expo-location";

const getLocation = () => {
  const [myX, setMyX] = useState(0);
  const [myY, setMyY] = useState(0);

  try {
    const currentLocation = async () => {
      await Location.requestPermissionsAsync();
      const coordsObj = await Location.getCurrentPositionAsync();
      await setMyY(coordsObj.coords.latitude);
      await setMyX(coordsObj.coords.longitude);
    };
    useEffect(() => {
      currentLocation();
    }, []);
    return { myX, myY };
  } catch (err) {
   
    setMyY(37.5572);
    setMyX(126.9279);
    return { myX, myY };
  }
};

export default getLocation;

И это CafeContext :

 import React, { useState, createContext } from "react";
import cafeApi from "../api/cafeApi";
import AsyncStorage from "@react-native-community/async-storage";
import testArray from "../api/testArray.json";
import { navigate } from "../RootNavigation";
import getLocation from "../hooks/getLocation";

const CafeContext = React.createContext();

export const CafeProvider = ({ children }) => {
  const [cafeList, setCafeList] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");
  const [distance, setDistance] = useState(300);

  //#####This line. I want to get location before getCafeList...
  const { myX, myY } = getLocation();

  const getCafeList = async () => {
    const response = await cafeApi.get("/search", {
      params: {
        // category_group_code: "CE7",
        x: myX,
        y: myY,
        radius: distance,
      },
    });
    await setCafeList(response.data);
  };

  return (
    <CafeContext.Provider
      value={{
        cafeList,
        getCafeList,
        distance,
        setDistance,
        term,
        setTerm,
        searchCafeList,
        getLikedCafeList,
      }}
    >
      {children}
    </CafeContext.Provider>
  );
};

export default CafeContext;

1. Вам нужно будет вызвать getCafeList в useEffect перехватчике, который имеет myX и myY в массиве зависимостей, тогда вы проверите, присутствуют ли значения перед выполнением вызова.

Ответ №1:

Ваша логика в getLocation неверна. Вы неправильно используете перехваты, вы не можете вернуть значения из компонента. Если вы хотите возвращать значения, вам следует создать пользовательский хук, который также остановит ожидание функций setState.

Пользовательские перехваты.

 import { useState, useEffect } from 'react';

function useLocation() {
  const [myX, setMyX] = useState(37.5572);
  const [myY, setMyY] = useState(126.9279);

  
    useEffect(() => {
    const currentLocation = async () => {
      await Location.requestPermissionsAsync();
      const coordsObj = await Location.getCurrentPositionAsync();
      setMyY(coordsObj.coords.latitude);
      setMyX(coordsObj.coords.longitude);
    };
      currentLocation();
    }, []);
 
  return return { myX, myY };
}

Контекст

 const CafeContext = React.createContext();

export const CafeProvider = ({ children }) => {
  const [cafeList, setCafeList] = useState([]);
  const [errorMessage, setErrorMessage] = useState("");
  const [distance, setDistance] = useState(300);

  //#####This line. I want to get location before getCafeList...
  const { myX, myY } = useLocation();

  const getCafeList = async () => {
    const response = await cafeApi.get("/search", {
      params: {
        // category_group_code: "CE7",
        x: myX,
        y: myY,
        radius: distance,
      },
    });
    setCafeList(response.data);
  };

  return (
    <CafeContext.Provider
      value={{
        cafeList,
        getCafeList,
        distance,
        setDistance,
        term,
        setTerm,
        searchCafeList,
        getLikedCafeList,
      }}
    >
      {children}
    </CafeContext.Provider>
  );
};

export default CafeContext;