我无法从React Native数组渲染数据

Question

我可以记录数据，但似乎无法显示，屏幕完全空白。 我没有收到任何错误，但屏幕上仍然没有任何内容

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import { FlatList } from 'react-native-gesture-handler';

export default class StockAdjustmentScreen extends React.Component {
     constructor(props) {
          super(props)
          this.state = {
               stockAdjustments: [],
          }
     }
     componentDidMount() {
          firestore().collection('stockAdjustments')
               .get().then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                         this.state.stockAdjustments.push({
                              id: doc.id, ...doc.data()
                         })
                    })
                    console.log(this.state.stockAdjustments)
               })
               .catch((error) => {
                    console.log
                         (error)
               })
     }
     render() {
          let Adjustments = this.state.stockAdjustments.map((val, key) => {
               return (
                    <View key={key}>
                         <FlatList style={styles.texts}>{val.comments}</FlatList>
                    </View>
               )
          })
          return (
               <View>
                    {Adjustments}
               </View>
          )
     }
}

这是我要显示的数据

Answer 1

您必须使用：

this.setState({...})

代替：

this.state.stockAdjustments.push({...})

以触发ui更新。

const stockAdjustments = []

querySnapshot.forEach((doc) => {
    stockAdjustments.push({
        id: doc.id, ...doc.data()
    })
})
this.setState({ stockAdjustments });