未定义不是对象 - this.State 的问题（FIREBASE/REACT NATIVE）

Question

花了 4 个多小时解决了这个问题，但没有成功。我最近开始学习如何使用 react 和 javascript 编写代码来创建一个允许用户将他们喜欢的位置添加到列表中的应用程序。

我能够连接到 firestore 并将数据返回到某个状态，但由于某种原因，我无法在“render()”和“return()”中访问它。我的控制台记录了经度和纬度等值，但是当我通过它访问状态时不起作用。这是代码，请看下面的照片

state = {
        regionSet: false,
      }

componentDidMount() {
        Geolocation.getCurrentPosition(position => {
          const { latitude, longitude } = position.coords
          const region = {
            ...this.state.region,
            latitude,
            longitude,
            latitudeDelta: 0.008,
            longitudeDelta: 0.008,
          }
          this.setState({ region, regionSet: true })
        })

        userData = async () => {
          const user = auth().currentUser;
          var userRef = firestore().collection('favoritelist').doc(user.uid).collection(user.uid);
          
          const markers = [];
              await firestore().collection('favoritelist').doc(user.uid).collection(user.uid).get()
                .then(querySnapshot => {
                  querySnapshot.docs.forEach(doc => {
                  markers.push(doc.data());
                });});
                this.setState({markers});
                console.log(this.state.markers)
                console.log(this.state.markers[0].lat) 
                
          };
          
        userData()
      }

render() {

      const { markers } = this.state
      const user = auth().currentUser;
      const mapRegion = {latitude:  37.782822, longitude: -122.4067605}

        return (
          
          <View>
            {console.log(markers)}
            <Text>
                {this.state.markers[0].lat}
            </Text>
          </View>

console logs the data/state perfectly fine

state doesn't work in a text and return

如果可能的话，感谢您的阅读和帮助:)

Answer 1

所以基本上发生的事情是您的 React 组件正在从 fire-store 获取数据，但该组件已经渲染，最简单的修复方法是将 markers[0].lat 更改为 markers[0]?.lat。一旦数据可用，这将显示数据。希望这能解决您的问题