在文本元素中react本机调用函数

IT技术 reactjs firebase react-native google-cloud-firestore
2021-04-28 06:02:44

我想调用一个getName带有game.set(Integer)and函数returns a String我想在文本元素内设置这个字符串。该功能运行良好,我在返回之前打印了结果。现在,导入函数import { getName } from '../SetsAPI';后,调用该函数后得到的结果始终为undefined

函数调用:

import { getName } from '../SetsAPI';
...
    <View style={styles.row}>
      <Text style={styles.text}>Game: </Text>
          <View style={styles.questionAmount}>
               <Text>{getName(game.set)}</Text>
          </View>
     </View>

功能:

 export const getName = (setId)=>{
    console.log("setId: " + setId)
    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!");
      }
  })
  }

为什么会发生这种情况?我该如何预防?谢谢!

1个回答

您需要使用useState来存储该值,然后它会在 UI 中更新它。

首先在以下位置声明状态:

{name, setName} = useState('');

这允许我们获取name和调用setName,并为其赋予初始值''

然后在你的componentDidMount或在一个useEffect钩子中,你会做:

setsRef
.doc(setId)
.get()
.then((doc) => {
  if (doc.exists) {
    console.log("document name: " + doc.data().name)
    setName(doc.data().name);
  } else {
    console.log("No such document!");
  }

这会导致您的组件重新渲染自身,然后您可以name在渲染方法中使用该属性。

另见: