getCurentPosition () в Reactjs не обновляет состояние - PullRequest
Новая
       44

getCurentPosition () в Reactjs не обновляет состояние

1 голос
/ 16 июня 2020

Я пытаюсь получить текущее местоположение пользователя в своем приложении, но даже если я вижу это, когда я console.log, это не работает. Я использую функцию asyn c, чтобы получить ее, но я должен делать что-то не так и не могу понять, в чем проблема.

ContextState 

import React, { useReducer } from "react";
import RestContext from "./restContext";
import RestReducer from "./restReducer";
import Yelp from "../../Util/Yelp";
import { getCurrentPosition } from "../../Util/GeoLocation";
import {
  GET_RESTAURANTS,
  GET_INFO_RESTAURANT,
  CLEAR_SEARCH,
  SET_LOADING,
  GET_LOCATION,
} from "../../types";

const RestState = (props) => {
  const initalState = {
    restaurants: [],
    restaurant: {},
    loading: false,
    location: {},
  };

  const [state, dispatch] = useReducer(RestReducer, initalState);

  // Get Restaurants
  const getRestaurants = async (text) => {
    setLoading();

    let restaurants = await Yelp.searchRestaurants(text);

    if (restaurants) {
      dispatch({ type: GET_RESTAURANTS, payload: restaurants });
    } else {
      dispatch({ type: GET_RESTAURANTS, payload: [] });
    }
  };

  // Get info Restaurants

  const getRestaurantInfo = async (id) => {
    setLoading();
    let restaurant = await Yelp.searchRestaurantsInfo(id);

    if (restaurant) {
      dispatch({ type: GET_INFO_RESTAURANT, payload: restaurant });
    } else {
      dispatch({ type: GET_INFO_RESTAURANT, payload: {} });
    }
  };

  // Clear search

  const clearSearch = () => dispatch({ type: CLEAR_SEARCH });

  // Set loading

  const setLoading = () => dispatch({ type: SET_LOADING });

  // Get location

  const fetchCoordinates = async () => {
    try {
      const coords = await getCurrentPosition();
      dispatch({ type: GET_LOCATION, payload: coords });
    } catch (error) {
      // Handle error
      console.error(error);
    }
  }

  return (
    <RestContext.Provider
      value={{
        restaurants: state.restaurants,
        restaurant: state.restaurant,
        loading: state.loading,
        getRestaurants,
        clearSearch,
        getRestaurantInfo,
        fetchCoordinates,
      }}
    >
      {props.children}
    </RestContext.Provider>
  );
};

export default RestState;

Это редуктор 

import {
  GET_RESTAURANTS,
  GET_INFO_RESTAURANT,
  CLEAR_SEARCH,
  SET_LOADING,
  GET_LOCATION,
} from "../../types";

export default (state, action) => {
  switch (action.type) {
    case GET_RESTAURANTS:
      return { ...state, restaurants: action.payload, loading: false };
    case GET_INFO_RESTAURANT:
      return { ...state, restaurant: action.payload, loading: false };
    case CLEAR_SEARCH:
      return { ...state, restaurants: [], loading: false };
    case SET_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_LOCATION:
      return { ...state, location: action.payload };
    default:
      return state;
  }
};

И главная страница, когда она должна использоваться 

import React, { Fragment, useEffect, useContext } from "react";
import Search from "../../Components/restaurants/Search";
import Alert from "../../Components/layout/Alert";
import Navbar from "../../Components/layout/Navbar";
import DisplayRestaurants from "../../Components/layout/DisplayRestaurants";
import Footer from "../../Components/layout/Footer";
import { Waypoint } from "react-waypoint";
import RestContext from "../context/restaurant/restContext";

const Home = () => {
  const restContext = useContext(RestContext);

  useEffect(() => {
    restContext.fetchCoordinates();
    // eslint-disable-next-line
  }, []);

  const handleWaypointEnter = () => {
    document.querySelector("nav").classList.remove("fixed");
  };
  const handleWaypointLeave = () => {
    document.querySelector("nav").classList.add("fixed");
  };

  return (
    <section className="main-home">
      <Fragment>
        <Navbar />
        <Search />
        <Alert />
        <Waypoint onEnter={handleWaypointEnter} onLeave={handleWaypointLeave} />
        <DisplayRestaurants />
        <Footer />
      </Fragment>
    </section>
  );
};

export default Home;

getCurrentPosition 

export function getCurrentPosition(options = {}) {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });
}

Coord obj 

GeolocationCoordinates {latitude: 52.3555177, longitude: -1.1743196999999999, altitude: null, accuracy: 372529, altitudeAccuracy: null, …}
accuracy: 372529
altitude: null
altitudeAccuracy: null
heading: null
latitude: 52.3555177
longitude: -1.1743196999999999
speed: null
__proto__: GeolocationCoordinates

Спасибо за ваша помощь

1 Ответ

1 голос
/ 16 июня 2020

можете ли вы попробовать это вместо этого?

он возвращает обещание, поэтому теоретически должна иметь возможность использовать .then 


    getCurrentPosition().then((res) => {
      console.log(res) // check what `res` is
      dispatch({ type: GET_LOCATION, payload: res.cords });
    })
...