如何在React程序的任何地方使用纬度和经度

Question

您需要在标记中使用geodata，在center属性中。但是React禁止在html块中使用js代码。我试着从promise中提取数据，但总是没有定义。

function App() {
var lc;
var getLocationPromise = new Promise((resolve) => {
navigator.geolocation.getCurrentPosition(async function (position) {
resolve([position.coords.latitude, position.coords.longitude])
})
})
getLocationPromise.then((location) => {
lc = location
return lc
}).catch((err) => {
document.white("error")
})
return (
<YMaps>
<Map className="myMap" defaultState={{ center: [34, 55], zoom: 9 }}  ></Map>
</YMaps>
</div>
)
}
export default App;

Answer 1

您可以使用如下所示的react local state

const [lat, setLat] = React.useState(0);
const [lng, setLng] = React.useState(0);
getLocationPromise.then((location) => {
setLat(location[0]);
setLng(location[1]);
}).catch((err) => {
document.write("error")
})

<Map className="myMap" defaultState={{ center: [lat, lng], zoom: 9 }}  ></Map>

Answer 2

你试过useEffect钩子了吗?你应该能够从任何地方引用对象(如果这就是你想做的)与React的"useEffect"one_answers"useState"属性。

对于您的用例，您应该这样做:

const [geoData, setGeoData] = useState(null)
useEffect(async ()=>{
const data = await YOUR_FUNCTION() / Promise
setGeoData(data)
},
// This one should be empty
[])

，然后在您的代码中，您可以访问geoData并根据需要使用它。