React Native中Text组件调用getName返回undefined该如何解决？

问题原因 #

• 你定义的getName是异步逻辑，底层调用的Firestore get()方法返回的是Promise对象，当前代码没有把这个Promise返回，且then回调内部的return只会把值返回到Promise链中，不会作为getName函数的同步返回值，所以函数默认返回undefined
• React的JSX渲染是同步执行的，直接在JSX中调用异步函数不可能拿到异步返回的结果渲染，等异步请求返回数据时，本次渲染已经执行完成

解决方案 #

第一步：修改getName函数，正确返回Promise #

export const getName = (setId)=>{
  console.log("setId: " + setId)
  // 增加return，把整个Promise链返回
  return setsRef
  .doc(setId)
  .get()
  .then((doc) => {
    if (doc.exists) {
      console.log("document name: " + doc.data().name)
      return doc.data().name;
    } else {
      console.log("No such document!");
      return ''; // 无匹配数据时返回默认值
    }
  })
}
// 也可以用async/await语法改写，效果完全一致

第二步：组件内用状态存储异步获取的名称，通过副作用触发请求 #

不能直接在JSX中调用异步函数渲染，需要配合useState存储结果、useEffect监听参数变化触发请求：

import { useState, useEffect } from 'react';
import { getName } from '../SetsAPI';

// 你的组件内部代码
const YourComponent = ({ game }) => {
  const [gameName, setGameName] = useState('加载中...'); // 可自定义默认占位文本

  useEffect(() => {
    // 监听game.set变化，参数变更后自动重新请求名称
    const fetchName = async () => {
      if (!game?.set) return;
      const name = await getName(game.set);
      setGameName(name || '未知名称');
    };
    fetchName();
  }, [game?.set]); // 依赖项填game.set

  return (
    <View style={styles.row}>
      <Text style={styles.text}>Game: </Text>
      <View style={styles.questionAmount}>
        <Text>{gameName}</Text>
      </View>
    </View>
  )
}

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