反应：我插入的数据在我的数据库中为 NULL

Question

填写完表格后，生成了纪念页面对象并将其添加到数据库中。从我的表格中，我得到了我的数据，除了得到的地址外，一切都很好。通过使用 react-geocode，我得到了我需要的纬度和经度，但是对象是在我得到纬度和经度之前制作和发布的，所以在数据库中这些只是 NULL。

我知道我的错误是我没有在等待地理编码器，但我已经尝试将它变成一个函数，但仍然没有成功。

感谢您的帮助！

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,
        })
      );
  };

Answer 1

如果您使用的是 async 函数，则在填充 memorialPage 对象之前，您应该 await 获得 Geocode.fromAddress 响应。
此外，如果您使用 await.

，则无需为 post 调用使用 then

尝试像这样更改您的代码：

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)
  }
};

反应：我插入的数据在我的数据库中为 NULL

React: the data I insert is NULL in my DB

google-geocoder

async-await

reactjs