Firebase React Native Flatlist仅渲染一行

我对web应用程序开发还很陌生，所以请帮我一把。Flatlist仅在我的应用程序上呈现一项，但返回console.log上的所有记录。下面是在平面列表上my console.log上返回的内容。它完全返回数据库中的所有行，但在flatlist呈现时只返回一行

Array []
Array [
  Object {
    "busLineName": "Saint Anthony",
    "busNumber": "6326",
    "key": "02-20-2020-1",
  },
]
Array [
  Object {
    "busLineName": "Saulog Transit",
    "busNumber": 5109,
    "key": "02-20-2020-2",
  },
]
Array [
  Object {
    "busLineName": "Lucky Seven",
    "busNumber": 8852,
    "key": "02-20-2020-3",
  },
]
Array [
  Object {
    "busLineName": "Kellen Transit",
    "busNumber": "4016",
    "key": "02-20-2020-4",
  },
]
Array [
  Object {
    "busLineName": "Golden Dragon Bus Lines",
    "busNumber": "1095",
    "key": "02-20-2020-5",
  },
]

这是我的密码：

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  ScrollView,
  ListItem,
} from "react-native";


import * as firebase from "firebase";
import { concat } from "react-native-reanimated";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      violations: [],
    };
  }
  componentDidMount() {
    this._isMounted = true;
    const ref = firebase.database().ref("violations").orderByKey();
    ref.on("value", (snapshot) => {
      snapshot.forEach((child) => {
        this.setState({
          violations: [
            {
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber,
            },
          ],
        });
      });
    });
  }

  componentWillUnmount() {
    const ref = firebase.database().ref("violations").orderByKey();
    ref.off("value");
  }


  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.violations}
          keyExtractor={(item) => {
            return item.key;
          }}
          renderItem={({ item }) => (
            <Text>
               {console.log(this.state.violations)}
              {item.key}
              {item.busLineName}
              {item.busNumber}
            </Text>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    borderRadius: 4,
    borderColor: "black",
    borderWidth: 1,
    width: 100,
    height: 60,
    backgroundColor: "grey",
    textAlign: "center",
  },
  text: {
    textAlignVertical: "center",
    textAlign: "center",
    color: "black",
  },
});

import React，{useState}来自“React”；
进口{
样式表，
文本，
看法
平面列表，
可触摸不透明度，
滚动视图，
列表项，
}从“反应本族语”；
从“firebase”导入*作为firebase；
从“react native reanimated”导入{concat}；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
违规行为：[]，
};
}
componentDidMount（）{
这个。_isMounted=true；
const ref=firebase.database（）.ref（“违规”）.orderByKey（）；
参考on（“值”，（快照）=>{
snapshot.forEach（（子项）=>{
这是我的国家({
违规行为：[
{
key:child.key，
busLineName:child.val（）.busLineName，
busNumber:child.val（）.busNumber，
},
],
});
});
});
}
组件将卸载（）{
const ref=firebase.database（）.ref（“违规”）.orderByKey（）；
参考价值（“价值”）；
}
render（）{
返回(
{
返回item.key；
}}
renderItem={（{item}）=>(
{console.log（this.state.involutions）}
{item.key}
{item.busLineName}
{item.busNumber}
)}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
项目：{
边界半径：4，
边框颜色：“黑色”，
边框宽度：1，
宽度：100，
身高：60，
背景颜色：“灰色”，
textAlign：“居中”，
},
正文：{
textAlignVertical：“居中”，
textAlign：“居中”，
颜色：“黑色”，
},
});

---

将componentDidMount更改为下面的代码，然后重试

componentDidMount() {
    this._isMounted = true;
    const ref = firebase.database().ref("violations").orderByKey();
    ref.on("value", (snapshot) => {
      const data = [];
      snapshot.forEach((child) => {
        data.push({
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber,
            })
        
      });
      this.setState({
          violations: data
        });
    });
  }

---

将componentDidMount更改为下面的代码，然后重试

componentDidMount() {
    this._isMounted = true;
    const ref = firebase.database().ref("violations").orderByKey();
    ref.on("value", (snapshot) => {
      const data = [];
      snapshot.forEach((child) => {
        data.push({
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber,
            })
        
      });
      this.setState({
          violations: data
        });
    });
  }

试试这个

public componentDidMount() {
  this._isMounted = true;
  const ref = firebase.database().ref("violations").orderByKey();
  ref.on("value", (snapshot) => {
    snapshot.forEach((child) => {
      if (this.state.violations.length === 0) { // check if your array is empty
        this.setState({
          violations: [
            {
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber
            }
          ]
        });
        return;
      }
      const cloneViolations = cloneDeep(this.state.violations); // Clone your this.state.violations to another const.
      const newObj = { // Created a new object to be pushed to your array.
        key: child.key,
        busLineName: child.val().busLineName,
        busNumber: child.val().busNumber
      };
      cloneViolations.push(newObj); // Pushed 'newObj' array into 'cloneViolations'.
      this.setState({ violations: cloneViolations }); // set it to other state.
    });
  });
}

试试这个

public componentDidMount() {
  this._isMounted = true;
  const ref = firebase.database().ref("violations").orderByKey();
  ref.on("value", (snapshot) => {
    snapshot.forEach((child) => {
      if (this.state.violations.length === 0) { // check if your array is empty
        this.setState({
          violations: [
            {
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber
            }
          ]
        });
        return;
      }
      const cloneViolations = cloneDeep(this.state.violations); // Clone your this.state.violations to another const.
      const newObj = { // Created a new object to be pushed to your array.
        key: child.key,
        busLineName: child.val().busLineName,
        busNumber: child.val().busNumber
      };
      cloneViolations.push(newObj); // Pushed 'newObj' array into 'cloneViolations'.
      this.setState({ violations: cloneViolations }); // set it to other state.
    });
  });
}

---

您从firebase获得的数据是什么？您从firebase获得的数据是什么？