React Native调用其他组件方法返回值为undefined如何解决？

问题根本原因 #

你遇到的问题本质是异步调用的返回值获取逻辑错误：

• Geolocation.getCurrentPosition 是异步API，你传入的成功回调函数是位置请求成功后才会执行的，回调内部的 return position 只会把值返回给回调函数本身，不会作为外层 LocateMe 函数的返回值。
• 你写的 LocateMe 函数本身没有写任何return语句，执行完默认就是返回 undefined，所以你赋值的变量自然是undefined，和你简化的同步返回字符串的例子逻辑完全不一样。

修复方案 #

可以把LocateMe封装成Promise来异步获取返回值：

import Geolocation from "react-native-geolocation-service";

let hasLocationPermission = true;

const LocateMe = () => {
  // 返回Promise对象，外部可以通过await或者then获取结果
  return new Promise((resolve, reject) => {
    if (hasLocationPermission) {
      Geolocation.getCurrentPosition(
        (position) => {
          console.log(position);
          resolve(position); // 成功时把结果抛出去
        },
        (error) => {
          console.log(error.code, error.message);
          reject(error); // 失败时抛出错误
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
      );
    } else {
      reject(new Error('无位置权限'));
    }
  })
}

export default LocateMe;

之后在Foo组件中调用时，要按异步逻辑处理：

import LocateMe from '../LocateMe'
import { useEffect, useState } from 'react'

const Foo = (props) => {
  const [position, setPosition] = useState(null)
  // 组件挂载后异步获取位置
  useEffect(() => {
    const getPosition = async () => {
      try {
        const pos = await LocateMe()
        console.log(pos) // 这里就能拿到正确的位置信息
        setPosition(pos)
      } catch (err) {
        // 处理权限、定位失败等异常
        console.error('定位失败', err)
      }
    }
    getPosition()
  }, [])
}

补充说明 #

如果你是在按钮点击等事件回调里调用定位，也可以直接在事件处理函数里加async/await，不需要写在useEffect里，核心是必须按异步逻辑获取异步API的返回值，不能像同步函数一样直接赋值拿结果。

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