React Native Flatlist 只渲染一行

Question

我对 Web 应用程序开发还很陌生，所以请帮助我。 Flatlist 仅在我的应用程序上呈现一项，但 returns console.log 上的所有记录。下面是我的 console.log 在 flatlist 上的 returns。它完全 returns 我数据库中的所有行，但当它由 flatlist 呈现时只有 returns 一行。

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",
  },
});

Here is my database

This is what flatlist renders

Answer 1

将 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
        });
    });
  }

Answer 2

试试这个。

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.
    });
  });
}

React Native Flatlist 只渲染一行

React Native Flatlist renders only one row

firebase

react-native

expo

react-native-flatlist

react-native-firebase