Question

我所在的位置不确定，如何解决此问题？如果在调用函数getGeo之后执行console.log（location），则会得到纬度和经度，但是在获取请求中它们变得不确定，这是为什么呢？编写此代码的更好方法是什么？

function Body(props) {
  const location = {};

  function getGeo() {
    navigator.geolocation.getCurrentPosition(function (position) {
      location.lat = position.coords.latitude;
      location.long = position.coords.longitude;
    });
  }

  useEffect(() => {
    getGeo();

    fetch(
      `http://api.openweathermap.org/data/2.5/weather?lat=${location.lat}&lon=${location.long}&units=metric&appid=key`
    )
      .then((response) => {
        return response.json();
      })
      .then((result) => {
        console.log(result);
      })
      .catch((err) => {
        console.log(err)
      });
  }, []);

Answer 1

使用反应状态跟踪位置值，以便组件在准备好值时重新渲染

from spectrum import *
N=500
dt=2*10**-3
# Creating a signal with 2 sinus waves.
x = np.linspace(0.0, N*dt, N)
y = np.sin(50.0 * 2.0*np.pi*x) + 0.5*np.sin(80.0 * 2.0*np.pi*x)

# classical FFT
yf = fft.fft(y)
xf = np.linspace(0.0, 1.0/(2.0*dt), N//2)

# The multitapered method
NW=2.5
k=4
[tapers, eigen] = dpss(N, NW, k)
Sk_complex, weights, eigenvalues=pmtm(y, e=eigen, v=tapers, NFFT=N, show=False)

Sk = abs(Sk_complex)**2
Sk = np.mean(Sk * np.transpose(weights), axis=0) * dt

# ploting both results
plt.figure()
plt.plot(xf,abs(yf[0:N//2])**2 / N * dt)
plt.plot(xf,Sk[0:N//2])

# ploting both results in log scale
plt.semilogy(xf, abs(yf[0:N // 2]) ** 2 / N * dt)
plt.semilogy(xf, Sk[0:N // 2])

# comparing total power
print(np.sum(abs(yf[0:N//2])**2 / N * dt), np.sum(Sk[0:N//2]))

Answer 2

这整个问题与可变范围有关，让我们仔细看看：

function Body(props) {
  /**
   * "location" is defined as empty object within entire scope
   * therefore "location.lat" and "location.long" are "undefined" in this scope
   * console.log(location.lat, location.long) -> undefined, undefined
   */
  const location = {};

  function getGeo() {
    navigator.geolocation.getCurrentPosition(function (position) {
      // Within this scope, 
      // "location.lat" and "location.long" are defined (have values)
      location.lat = position.coords.latitude;
      location.long = position.coords.longitude;
    });
  }

  // despite giving values to "location.lat" and "location.long", 
  // they are still "undefined"
  console.log(location.lat, location.long) // -> undefined, undefined

  useEffect(() => {
    getGeo();
    // Even within here, 
    // "location.lat"and "location.long" are "undefined" in this scope
  }, []);

解决方案

使用React.useRef保留对变量的引用

import React from 'react';

function Body(props) {
  // reference your variables
  let lat = React.useRef('');
  let long = React.useRef('');

  function getGeo() {
    navigator.geolocation.getCurrentPosition(function (position) {
      lat.current = position.coords.latitude;
      long.current = position.coords.longitude;
    });
  }

  React.useEffect(() => {
    // We call getGeo() to run first;
    // If it's successful, we now have values for "lat" and "long"
    getGeo();
    
    // We only do a fetch if "lat" and "long" have values
    // We use the key (current) to extract/check those values
    if (lat.current && long.current) {
       // Do a fetch
    }
  }, [lat, long]);
};

使用useEffect不确定对象

2 个答案: