Porque o react necessita de um objeto vazio para renderizar informações da FlatList

[alvarengacarlos 0]

import React, { Component } from 'react';
import { Text, Button, View, TextInput, Alert, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';

export default class Fetch  extends Component {

    constructor() {
        super();
		//Aqui. Porque é necessário este objeto vazio. Já tentei de outra forma como :
		//this.data = {data:[]}
		//Porém não renderiza. Tentei apagar o primeiro objeto, mas também não renderiza.
		//O grande problema é que na hora de exibir ele mostra o objeto vazio
        this.data = [{}];
    }
    componentDidMount() {        
        let urlQuery = '/animal/bull/getBull/2'; 
          
        fetch(urlServer+urlQuery)
        .then(response => response.json())
        .then(response => {
            
            this.data.push(response);
            console.log(this.data);            
        });  

    }

    render() {         
        return (
            <FlatList 
                data={this.data}
                renderItem={({item}) => (
                    <View>
                        <Text>Id: {item.idEarring}</Text>
                        <Text>{item.name}</Text>
                        <Text>{item.breed}</Text>
                        <Text>{item.dateOfBirth}</Text>
                        <Text>{item.weight}</Text>
                    </View>                    
                )}
            />             
        );
    }
}

Tenho este app feito em react-native que faz consulta em uma api rest. Porém não estou conseguindo obter renderização se a inclusão de um objeto vazio.

Se não colocar o objeto vazio ele não renderiza nada.

Já tentei apagar o objeto vazio com o shift, más ele não renderiza também, no entanto ele retorna o valor no console.

[William Bruno 1501]

é necessário informar o valor inicial, se você não quer renderizar, a menos que tenha dados, é só fazer:

 this.data = [];

e então:

return data.length && (
            <FlatList 

[alvarengacarlos 0]

Boa tarde Wiliam. Penso que não dei a explicação correta. Não entendi muito bem o que você quis dizer mas obrigado. Vou tentar refazer a pergunta pois este é meu tcc.

 

Estou fazendo uma consulta a uma api que eu mesmo fiz (esta parte acho que tu entendeu). Este é  um componente que faz uma simples busca por um touro na API (server side). Não sou muito familiarizado com front-end por isso estou tendo dificuldades na hora de exibir a informação. Já procurei no Youtube mas nada. Para fazer a busca estou utilizando o fetch que até então estava tranquilo. Na parte de exibição dos dados estou utilizando o FlatList. Quando faço daquela forma ele está renderizando porem o objeto que é inicializado também, ocupando o espaço. Gostaria de sabe se tem outra forma de fazer isso. Segue o novo código

import React, { Component } from 'react';
import { Text, Button, View, TextInput, Alert, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';

export default class Fetch  extends Component {

    constructor() {
        super();
        this.data = [{}];
    }

    componentDidMount(id=1) {
        let urlQuery = '/animal/bull/getBull' 
        if (id != null) {
            urlQuery = '/animal/bull/getBull/'+id;
        }
          
        fetch(urlServer+urlQuery)
        .then(response => response.json())
        .catch(erro => alert('Erro ao pesquisar'))
        .then(response => {
            if (id != null) {
                this.data.push(response);
            } else {
                for (const iterator in response) {
                    this.data.push(response[iterator]);
                }     
            }     
            console.log(this.data);
        });
          

    }

    render() {         

        let styles = StyleSheet.create({
            text: {
                fontSize: 20,       
            },
        });
        
        return (
            <FlatList 
                data={this.data}
                renderItem={ ({item}) => (                    
                    <>
                        <Text style={styles.text}>Id: {item.idEarring}</Text>
                        <Text style={styles.text}>Name: {item.name}</Text>
                        <Text style={styles.text}>Breed: {item.breed}</Text>
                        <Text style={styles.text}>Date of Birth: {item.dateOfBirth}</Text>
                        <Text style={styles.text}>Weigth: {item.weigth}</Text>
                        <Text/>
                    </>                    
                )}
            />             
        );
    }
}

Repositório, se por um acaso facilitar: https://github.com/alvarengacarlos/miruku-app/tree/dev

[alvarengacarlos 0]

Fiz uma busca e encontrei um video gringo no youtube que mostra. Segue código. O único detalhe é que ele fica lançando uns Warns sem parar, ou seja, está fazendo buscas na api mesmo após obter os resultados

import React, { Component, useEffect, useState } from 'react';
import { Text, FlatList, SafeAreaView, ActivityIndicator } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';


const Fetch = () => {
    let urlQuery = '/animal/bull/getBull' 

    const [data, setData] = useState([]);

    useEffect( () => {
        fetch(urlServer+urlQuery)
        .then(response => response.json())
        .then(response => setData(response))
        .catch(error => alert('Erro ao pesquisar:'+ error));
    });

    return (        
        <>         
            <FlatList
            data={data} 
            renderItem={({ item }) => (        
                <Text>{item.idEarring}, {item.name}, {item.breed}, {item.weigth}</Text>
            )}/>
        </> 
               
    );
};

export default Fetch;

[alvarengacarlos 0]

Se alguém tiver o mesmo problema. consertei utilizando Hulcks.

 

import React, { Component, useEffect, useState } from 'react';
import { Text, FlatList, SafeAreaView, ActivityIndicator, View, Button, TextInput } from 'react-native';
import Styles from '../../components/Styles';
import { urlServer } from '../../config/constant';


const Fetch = ({id}) => {
    let urlQuery = '/animal/bull/getBull/';

    if (id != null)
        urlQuery = '/animal/bull/getBull/'+id;

    const [data, setData] = useState([]);
    const [value, setValue] = useState(false);
    const [limit, setLimit] = useState(false);

    useEffect( () => {        
        if (limit != false) {
            fetch(urlServer+urlQuery)
            .then(response => response.json())
            .then(response => {
                if (id == null)
                    setData(response);
                else 
                    setData([response]);
            })
            .catch(error => alert('Erro ao pesquisar:'+ error));
        }
        setLimit(false);
    });

    const set = () => {
        setValue(true); 
        setLimit(true); 
    };

    return (        
        
        <View style={Styles.base}>                
            <View style={Styles.alineXCenterYCenter}>
                <Text style={{paddingTop:0, fontSize: 30, color: 'ivory', textAlign: 'center'}}>Search Bull</Text>
                <TextInput style={Styles.textInput} placeholder='Earring'></TextInput>                    
                <Button
                    title='         Search        '
                    color='gray'
                    onPress={() => {set()}}
                />
            </View>  
            {value ?
            <View style={{flex: 2}}>                 
                <FlatList
                    data={data} 
                    keyExtractor={}
                    renderItem={({ item }) => (        
                    <Text>{item.idEarring}, {item.name}, {item.breed}, {item.weight}, {item.dateOfBirth}</Text>
                )}/>
            </View> 
            : false}     
        </View>
    );
};

export default Fetch;