Question

我正在尝试获得当前职位并在我周围找到一些咖啡馆清单。

我做了一个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;

Answer 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;

在调用另一个函数之前，如何在React本机上下文文件中调用函数？

1 个答案: