alvarengacarlos

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;

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.

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;

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

Tenho uma Api rest feita com Symfony. Esta api retorna consultas no formato json. Tudo foi testado no ambiente localhost:8080. Esta é uma controller que retorna a consulta: <?php namespace App\Controller\Animal\Bull; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Routing\Annotation\Route; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\Request; use App\Entity\Animal\Bull\Bull; /** * @Route("/animal") */ class BullGetController extends AbstractController { /** * @Route("/bull/getBull/{id}/{idEarring}", methods={"GET"}, name="get_bull") */ public function getBull(int $id, int $idEarring): Response { $repository = $this->getDoctrine() ->getRepository(Bull::class); $bull = $repository->findOneBy([ 'id' => $id, 'idEarring' => $idEarring ]); return $this->json([ 'idEarring' => $bull->getIdEarring(), 'name' => $bull->getName(), 'breed' => $bull->getBreed(), 'dateOfBirth' => ($bull->getDateOfBirth())->format('Y-m-d'), 'weight' => $bull->getWeight() ]); } } Com pode se ver na imagem consultas feitas a partir do navegador são retornadas respostas. Quando é feita uma consulta por meio do Fetch javascript o mesmo não ocorre. A resposta obtida não é igual. 'use strict'; let url = 'http://localhost:8080/animal/bull/getBull/2/2'; const promise = fetch(url) .then( (response) => console.log(response) ); Gostaria de saber o porque disso? Porque a resposta não é igual.

Acabei de tentar novamente e funcionou