Проблемы с 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>
        );
    }
}

EDIT 2:

Если я заменю строку this.setState({ objects: arr });

на

this.setState({  arr });

3 объекта будут напечатаны правильно, но когда есть 2 объекта, будет пустой экран

Answer 1

Смотрите с return null, он ведет себя так же с wating Он отлично работает, если я удалю return null

Answer 2

Проблема в том, что вы выполнили проверку таким образом

if (!item) {
        return null
    }

Итак, если ваш набор данных находится таким образом

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

, он вернет null во втором элементе массива как Таким образом выполняется условие! item. Итак, ваша функция должна быть такой:

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


    return (
        <View>

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

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

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

        </View>
    );
}