React使用react-geocode获取经纬度，提交后DB中对应字段为NULL如何解决？

问题根因 #

• 你没有等待Geocode.fromAddress的异步返回结果就直接执行了后续的对象构造和接口请求逻辑
• 即使你等待了异步返回，直接用setAdresLatitude、setAdresLongitude更新的React状态也不会在当前作用域立刻生效，你拿到的还是旧的状态值（React状态更新是异步批处理的，当前闭包内的状态值不会实时改变）

修复后的代码 #

const onSubmit = async (data) => {
  if (image !== null) {
    await handleUpload();
  };
  
  //将获取到的地址转换为经纬度
  Geocode.setApiKey("x");
  Geocode.setLanguage("nl");
  Geocode.setRegion("be");
  //谷歌地理编码接口针对给定经纬度会返回多个地址结果，根据官方文档，ROOFTOP参数返回精度最高的结果
  Geocode.setLocationType("ROOFTOP");
  let lat, lng;
  try {
    const response = await Geocode.fromAddress(data.Adres);
    lat = response.results[0].geometry.location.lat;
    lng = response.results[0].geometry.location.lng;
    console.log(lat, lng);
    // 如果需要更新状态给其他地方用再保留这两行，构造memorialPage直接用上面的lat、lng变量即可
    setAdresLatitude(lat);
    setAdresLongitude(lng);
  } catch (error) {
    console.error(error);
    // 这里可以加地址解析失败的兜底逻辑，比如给用户提示，终止后续提交
    return;
  }

  //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: lat,
    Longitude: lng,
    IsUndertaker: null,
    Undertakers_Id: null,
  };

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

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

补充说明 #

• 把.then回调的写法改成await + try catch的写法，保证经纬度解析完成后才会执行后续逻辑
• 构造memorialPage时直接用解析拿到的lat、lng变量，不用依赖更新后的状态，避免状态更新不及时的问题
• 加了错误捕获逻辑，地址解析失败时可以终止提交，避免提交不完整的数据

内容的提问来源于stack exchange，提问作者Dundar