Javascript 从承诺返回特定字符串

我正在编写一个React/Next.js应用程序，并使用what3words将项目映射到一个位置。我的代码接收what3words地址，将其转换为坐标，然后在Mapbox地图上显示位置

const Item=（）=>{
const location=“大胆、狮子、种族”；
const-api=require（“@what3words/api”）；
setOptions（{key:“my_api_key”}）；
const data=api.convertToCoordinates（位置）。然后（（值）=>{
返回值；
});
const[coords，setCoords]=useState（）；
异步函数getCoords（）{
const jason=等待数据；
console.log（jason）；
赛特库兹（杰森）；
}
getCoords（）；
const[viewport，setViewport]=useState({
宽度：1000，
身高：400，
纬度：coords.coordinates.lat，
经度：coords.coordinates.lng，
缩放：16，
});
返回(
);
};

what3words API返回一个承诺：

{
“国家”：“GB”，
“正方形”：{
“西南”：{
“液化天然气”：-0.12552，
“lat”：51.508328
},
“东北”：{
“液化天然气”：-0.125477，
“lat”：51.508355
}
},
“最近的地方”：“伦敦”，
“坐标”：{
“液化天然气”：-0.125499，
“lat”：51.508341
},
“文字”：“勇敢、狮子、种族”，
“语言”：“en”，
“地图”：https://w3w.co/daring.lion.race"
}

我试图在视口中放置坐标，但这不起作用。我正在使用ReactMapGL（）显示Mapbox映射。

getCoords

是异步的，因此您不能调用它，然后立即尝试使用它的结果。在异步操作之外，您可以将初始状态设置为一些默认值：

const [viewport, setViewport] = useState({
  width: 1000,
  height: 400,
  latitude: 0,  // default value
  longitude: 0, // default value
  zoom: 16,
});

然后在异步操作中，在数据可用后，可以使用这些值更新状态（就像您已经使用

coords

状态所做的那样）：

请注意，在异步操作完成后使用更新的值重新渲染之前，组件将使用默认值短暂渲染。如果不需要这样做，那么也可以基于状态有条件地进行渲染。也许是这样的：

return (
  <div>
    {
      viewport.latitude === 0 ?
      'Please wait...' :
      <ReactMapGL
        mapStyle="mapbox://styles/mapbox/outdoors-v11"
        mapboxApiAccessToken="my_api_key"
        {...viewport}
      ></ReactMapGL>
    }
  </div>
);

返回(
{
viewport.latitude==0？
“请等一下……”
}
);

getCoords

是异步的，因此您不能调用它，然后立即尝试使用它的结果。在异步操作之外，您可以将初始状态设置为一些默认值：

const [viewport, setViewport] = useState({
  width: 1000,
  height: 400,
  latitude: 0,  // default value
  longitude: 0, // default value
  zoom: 16,
});

然后在异步操作中，在数据可用后，可以使用这些值更新状态（就像您已经使用

coords

状态所做的那样）：

请注意，在异步操作完成后使用更新的值重新渲染之前，组件将使用默认值短暂渲染。如果不需要这样做，那么也可以基于状态有条件地进行渲染。也许是这样的：

return (
  <div>
    {
      viewport.latitude === 0 ?
      'Please wait...' :
      <ReactMapGL
        mapStyle="mapbox://styles/mapbox/outdoors-v11"
        mapboxApiAccessToken="my_api_key"
        {...viewport}
      ></ReactMapGL>
    }
  </div>
);

返回(
{
viewport.latitude==0？
“请等一下……”
}
);

Hi，我尝试了这个，它正确地将

jason

记录到控制台，但随后报告了一个错误，即

coords

未定义。我没有使用

setCoords

，只是使用了

jason.coordinates.lat

和

jason.coordinates.lng

，但它仍然返回未定义。有什么线索吗？@edapm：那是我的错误，我忘了设置状态也是异步的。我已经更新了代码。您需要的数据在jason中，而不是在该行上依赖coords。（这意味着如果只使用视口状态，可能根本不需要coords状态。）我仍然会遇到以下错误：

TypeError:无法访问属性“坐标”，jason未定义。It console.logs
jason
，但是在
setViewport
@edapm之前它变得未定义：哪一行给出了该错误？你说jason在我们使用它之前就已经成功登录到控制台了。在
{…viewport}
，
纬度：jason.coordinates.lat
之后的那一行。您好，我试过了，它正确地将
jason
登录到控制台，但随后报告了一个错误，
坐标
未定义。我没有使用
setCoords
，只是使用了
jason.coordinates.lat
和
jason.coordinates.lng
，但它仍然返回未定义。有什么线索吗？@edapm：那是我的错误，我忘了设置状态也是异步的。我已经更新了代码。您需要的数据在jason中，而不是在该行上依赖coords。（这意味着如果只使用视口状态，可能根本不需要coords状态。）我仍然会遇到以下错误：
TypeError:无法访问属性“坐标”，jason未定义。It console.logs
jason
，但是在
setViewport
@edapm之前它变得未定义：哪一行给出了该错误？您说jason在我们使用它之前成功登录到控制台的那一行。
{…viewport}
，
纬度：jason.coordinates.lat
。