React Native Flatlist 只渲染一行

Posted 2023-02-19

【中文标题】React Native Flatlist 只渲染一行

【英文标题】：React Native Flatlist renders only one row

【发布时间】：2020-10-23 00:21:03

【问题描述】：

我对 Web 应用程序开发很陌生，所以请帮帮我。 Flatlist 仅在我的应用程序上呈现一项，但会返回 console.log 上的所有记录。以下是我在平面列表上的 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",
  ,
);

Here is my database

This is what flatlist renders

【问题讨论】：

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

【参考方案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
        );
    );
  

【参考方案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.
    );
  );