Блог

После заполнения формы объект memorialpage создается и добавляется в бд. Из моей формы я получаю свои данные, и все готово, кроме адреса, который указан. Используя react-геокод, я получаю широту и долготу, которые мне нужны, но объекты создаются и публикуются до того, как я смогу получить lat и lng, поэтому в БД они просто ПУСТЫ.

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

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

 const onSubmit = async (data) => {

    if (image !== null) {
      await handleUpload();
    };
    
    //Transforming the address that we get to latitude and longitude
    Geocode.setApiKey("x");
    Geocode.setLanguage("nl");
    Geocode.setRegion("be");
    //Google geocoder returns more than one address for given lat/lng, according to google docs, ROOFTOP param returns most accurate result
    Geocode.setLocationType("ROOFTOP");
    Geocode.fromAddress(data.Adres).then(
      (response) => {
        const { lat, lng } = response.results[0].geometry.location;
        console.log(lat, lng);
        setAdresLatitude(lat);
        setAdresLongitude(lng);
      },
      (error) => {
        console.error(error);
      }
    );

    //Object for memorialPage
    let memorialPage = {
      FirstName: dataMemorial.FirstName,
      LastName: dataMemorial.LastName,
      BirthDate: dataMemorial.BirthDate,
      DateOfDeath: dataMemorial.DateOfDeath,
      Obituary: null,
      Quote: data.Quote,
      QuoteAuthor: data.QuoteAuthor,
      IntroText: data.IntroText,
      Latitude: adresLatitude,
      Longitude: adresLongitude,
      IsUndertaker: null,
      Undertakers_Id: null,
    };

    await app.put(`/api/update-memorialpages/`, memorialPage, axiosConfig);

    //Post adminhasMemorialPage
    await app
      .post(`/post/admin-has-memorialpage/`, idChecker, axiosConfig)
      .then((res) =>
        history.push({
          pathname: "/memorialpage-form-3",
          state: memorialPage,
        })
      );
  };
 

Вы должны await получить Geocode.fromAddress ответ перед заполнением memorialPage объекта, если вы используете async функцию.
Кроме того, нет необходимости использовать then для почтового вызова, если вы используете await .

Попробуйте изменить свой код следующим образом:

 const onSubmit = async (data) => {
  if (image !== null) {
    await handleUpload();
  }

  //Transforming the address that we get to latitude and longitude
  Geocode.setApiKey('x');
  Geocode.setLanguage('nl');
  Geocode.setRegion('be');
  //Google geocoder returns more than one address for given lat/lng, according to google docs, ROOFTOP param returns most accurate result
  Geocode.setLocationType('ROOFTOP');

  try {
    const response = await Geocode.fromAddress(data.Adres)
    const { lat, lng } = response.results[0].geometry.location;
    setAdresLatitude(lat);
    setAdresLongitude(lng);

    //Object for memorialPage
    let memorialPage = {
        FirstName: dataMemorial.FirstName,
        LastName: dataMemorial.LastName,
        BirthDate: dataMemorial.BirthDate,
        DateOfDeath: dataMemorial.DateOfDeath,
        Obituary: null,
        Quote: data.Quote,
        QuoteAuthor: data.QuoteAuthor,
        IntroText: data.IntroText,
        Latitude: adresLatitude,
        Longitude: adresLongitude,
        IsUndertaker: null,
        Undertakers_Id: null,
    };

    await app.put(`/api/update-memorialpages/`, memorialPage, axiosConfig);

    //Post adminhasMemorialPage
    await app.post(`/post/admin-has-memorialpage/`, idChecker, axiosConfig)
    
    history.push({
        pathname: '/memorialpage-form-3',
        state: memorialPage,
    })
  } catch (err) {
      console.log(err)
  }
};