如何 return 来自 UseEffect Hook 的值

Question

我正在从 Use Effect 挂钩（我比较陌生）获取纬度和经度。我想 return use effect hook 之外的值并将它们存储在变量中，甚至在需要时存储在状态中。我可以控制台记录这些值，但我只是添加一个 return 语句还是以某种方式传递参数？我需要使用什么功能？我计划将纬度和经度数据传递到代码的其他部分，这就是我尝试从 useEffect 挂钩中检索它的原因。

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      let lat = position.coords.latitude;
      let long = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

let newLat = lat?
let newLong = long?

Answer 1

使用必须在useEffect之外设置纬度和经度你可以试试这个：

let lat, long;

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      lat = position.coords.latitude;
      long = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

你的 lat 和 long 变量将没有值，因为它在 useEffect 中初始化

Answer 2

您可以将它们保存在状态或引用挂钩中。

以下是我使用参考挂钩的方法：

const lat = useRef(null);
const long = useRef(null);

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      lat.current = position.coords.latitude;
      long.current = position.coords.longitude;
      console.log(lat);
      console.log(long);
    });
  }, []);

然后您可以使用 .current 访问 lat 和 long 值。更改它们不会触发重新渲染。

如果你想使用状态，你可以这样做

const [lat, setLat] = useState(null);
const [long, setLong] = useState(null);

useEffect(() => {
    if ("geolocation" in navigator) {
      console.log("Available");
    } else {
      console.log("Not Available");
    }
    navigator.geolocation.getCurrentPosition(function (position) {
      setLat(position.coords.latitude);
      setLong(position.coords.longitude);
      console.log(lat);
      console.log(long);
    });
  }, [setLat, setLong]);

您可以像使用任何正常状态一样使用它们。

还要确保在尝试使用它们时它们的值不为空。

Answer 3

你可以试试 useState 和 useEffect

const [state, setState] = useState(initialState);

initialState 可以是字符串、数字、对象或数组等。您只能使用 setState 来更改状态的值。您可以 return 您的值并放入状态并在 useEffect 之外使用它。如果你的值需要preState，记得在setState中传递一个箭头函数，并将preState作为参数传递。

如何 return 来自 UseEffect Hook 的值

How to return values from UseEffect Hook

arguments

parameter-passing

reactjs

use-effect