Flatlist numColumns问题

Question

根据用户的选择尝试打印图像集合并将其打印在2列上，但是这样做有问题

import React, { Component } from 'react';
import {View, FlatList} from 'react-native';
import {f, auth, database} from '../../config/firebase';
import {SearchBar} from "react-native-elements";
import {ArtObjectCard} from "../components/ArtObjectCard";





export default class ExhibitionDetailScreen extends Component{

    static navigationOptions = {
        headerShown: false,
    };



  constructor(props)
  {
    super(props);
    this.state = {
        exhibit: props.navigation.state.params.exhibit,
        objectIds: [],
        objects: []
  };

  }

  getObject = (objId) => {

      const ref = database.ref('object').child(objId);


      ref.once('value').then((snapshot) => {
          let object =  snapshot.val();

          object["id"] = objId;

          this.state.objects.push(object);

      });
  }


  getData = () => {

      database.ref(`exhibition_object/${this.state.exhibit.id}`).once('value')
          .then((snapshot) => {
              this.setState({
                  objectIds: Object.keys(snapshot.val())

              })

              for( let i = 0;i < this.state.objectIds.length;i++ )
              {
                  // Create a new array based on current state:
                  let arr = [...this.state.objects];

                  // Add item to it
                  arr.push(this.getObject(this.state.objectIds[i]));

                  // Set state
                  this.setState({ objects: arr });
              }
          });



  }


    componentDidMount () {

        this.getData()


    }

    keyExtractor = (item, index) => {

        return index.toString();
    }



    renderItem = ({item, index}) => {


        if (!item) {
            return null
        }

        return (
            <View>

                <ArtObjectCard
                    title={item.title}

                    image={{uri: item.image}}

                    onClickButton={()=>{this._onPressItem(item)}}
                />

            </View>
        );
    }




    render(){
        const { search } = this.state;
        return (

            <View style={{flex: 1}}>

                <SearchBar
                    placeholder="Type something here...."
                    onChangeText={this.updateSearch}
                    value={search}
                />

                <FlatList
                    data={this.state.objects}
                    renderItem={this.renderItem}
                    keyExtractor={this.keyExtractor}
                    numColumns={2}

                />
            </View>
        );
    }
}

我正在使用Firebase来获取图像。当我有3个项目的数组时有这个问题

并且当我有2个元素的时候没有问题

我有这个问题是因为数据没有时间加载，还是我该如何解决？

编辑1：我尝试了这个，但对我来说仍然不起作用

  renderItem = ({item, index}) => {


        return (
            <View>

                <ArtObjectCard
                    title={item?item.title:""}

                    image={{uri:item.image}}

                    onClickButton={()=>{this._onPressItem(item)}}
                />

            </View>
        );
    }

ArtObjectCard类

import React, { Component } from "react";
import {
    Text,
    View,
    Image,
    Dimensions,
    Platform,
    ProgressViewIOS,
    ProgressBarAndroid,
} from "react-native";
let screenWidth = Dimensions.get("window").width;

export class ArtObjectCard extends Component<Props> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View
                style={{
                    height: 200,
                    margin: 10,


                }}
            >
                <View

                >
                    <Image
                        borderRadius={10}
                        source={this.props.image}
                        style={{
                            width: this.props.width ? this.props.width : screenWidth/2  - 20,
                            height: this.props.height ? this.props.height : 200,
                            resizeMode: "cover"
                        }}
                    />

                </View>
            </View>
        );
    }
}

编辑2：

如果我替换this.setState({ objects: arr });行

to

this.setState({  arr });

3个对象将被正确打印，但是当有2个对象时将出现空白屏幕

Answer 1

问题是您已经通过这种方式进行检查

if (!item) {
        return null
    }

因此，如果您的数据集采用这种方式

objects = [{title:"A",Image:""},{},{title:"A",Image:""},{title:"A",Image:""}]

它将以！item条件为true的方式在数组的第二个元素处返回null。所以你的功能应该是这样的：

renderItem = ({item, index}) => {


    return (
        <View>

            <ArtObjectCard
                title={item?item.title:""}

                image={{uri:item? item.image:"Some default url"}}

                onClickButton={()=>{this._onPressItem(item)}}
            />

        </View>
    );
}

Answer 2

看到带有return null的行为与等待相同如果我删除return null，它会正常工作