1

Tenho essa classe que funciona perfeitamente:

import React, {Component} from 'react';

import Icon from 'react-native-vector-icons/FontAwesome';
import AsyncStorage from '@react-native-community/async-storage';
import {View, Text} from 'react-native';

import api from '../../services/api';
import styles from './styles';
import Header from '../../components/Header';

export default class Perfil extends Component {
  state = {
    data: [],
  };

  async componentDidMount() {
    console.tron.log('DID MOUNT');
    const username = await AsyncStorage.getItem('@Loger:email');
    this.loadRepositories(username);
    console.tron.log('USERNAME' + username);
  }
  loadRepositories = async username => {
    const {data} = await api.get(`/usuarios/email/${username}`);
    console.tron.log(data);
    this.setState({data});
  };

  render() {
    return (
      <View style={styles.container}>
        <Header title="Profile" />
        {this.state.data.map(texto => (
          <View>           
              <Text style={styles.infoNome}>{texto.nome}</Text>
              <Text style={styles.infoText}>{texto.nascimento}</Text>                
              <Text style={styles.infoText}>{texto.email}</Text>
             <Text style={styles.infoText}>{texto.telefone}</Text>             
             <Text style={styles.infoText}>{texto.endereco}</Text>            
          </View>
        ))}
      </View>
    );
  }
}

Agora essa segunda tela faz a mesma requisição e não renderiza nada na tela:

import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import AsyncStorage from '@react-native-community/async-storage';
import {View, Text} from 'react-native';

import api from '../../services/api';
import styles from './styles';
import Header from '../../components/Header';

export default class Perfil extends Component {
  state = {
    nome: '',
    nascimento: '',
    email: '',
    telefone: '',
    endereco: '',
  };

  async componentDidMount() {
    console.tron.log('DID MOUNT');
    const username = await AsyncStorage.getItem('@Loger:email');
    this.loadRepositories(username);
    console.tron.log('USERNAME' + username);
  }
  loadRepositories = async username => {
    const {data} = await api.get(`/usuarios/email/${username}`);
    console.tron.log('DATA: ' + this.state);
    const {nome, nascimento, email, telefone, endereco} = data;
    this.setState({nome, nascimento, email, telefone, endereco});
  };

  render() {
    const {nome, nascimento, email, telefone, endereco} = this.state;
    return (
      <View style={styles.container}>
        <Header title="Profile" />

        <View>
          <View style={styles.info}>
            <Text style={styles.infoNome}>{nome}</Text>
            <Text style={styles.infoText}>{nascimento}</Text>
            <Text style={styles.infoText}>{email}</Text>
            <Text style={styles.infoText}>{telefone}</Text>
            <Text style={styles.infoText}>{endereco}</Text>
          </View>
        </View>
      </View>
    );
  }
}

Creio que não estou fazendo a desestruturação de forma correta... Como fazer a segunda tela funcionar ?

Não quero usar esse trecho de código this.state.data.map para fazer o mapeamento como na primeira classe.

Esse e o retorno da requisição feita no Insominia:

[
  {
    "_id": "5d9ba2de73f4f77f2fcb1610",
    "nome": "Kiko",
    "nascimento": "10/10/2000",
    "email": "[email protected]",
    "telefone": "356-7890",
    "endereco": "Rua Maria da Silva Esperança",
    "__v": 0
  }
]

Saída no debug:

inserir a descrição da imagem aqui

Como mudar esse codigo do backend(Node , express, mongo, mongose) para retornar um objeto e não um array quando eu passo o parametro email:

controlador:

const mongoose = require("mongoose");

const Usuario = mongoose.model("Usuario");

module.exports = {
  async index(req, res) {
    const { page = 1 } = req.query;
    // const usuarios = await user.paginate({}, { page, limit: 10 });
    const usuarios = await Usuario.find();
    return res.json(usuarios);
  },
  async show(req, res) {
    const user = await Usuario.findById(req.params.id);
    return res.json(user);
  },

  async find(req, res) {
    try {
      const user = await Usuario.find({ email: req.params.email });
      if (user.length === 0) {
        return res.status(400).send({ error: "Error loading  contact" });
      }
      return res.json(user);
    } catch (error) {
      return res.status(400).send({ error: "Error loading  contact" });
    }
  },

  async update(req, res) {
    const user = await Usuario.findByIdAndUpdate(req.params.id, req.body, {
      new: true
    });

    return res.json(user);
  },
  async store(req, res) {
    const user = await Usuario.create(req.body);

    return res.json(user);
  },
  async destroy(req, res) {
    await Usuario.findByIdAndRemove(req.params.id);

    return res.send();
  }
};

Modelo:

const mongoose = require("mongoose");
const mongoosePaginate = require("mongoose-paginate-v2");

const UsuarioSchema = new mongoose.Schema({
  nome: {
    type: String,
    required: true
  },
  nascimento: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  telefone: {
    type: String,
    required: true
  },
  endereco: {
    type: String,
    required: true
  }
});
UsuarioSchema.plugin(mongoosePaginate);

mongoose.model("Usuario", UsuarioSchema);
4
  • 1
    Poderia mostrar o retorno do axios? Especificamente o que vem dentro do data? Commented 8/10/2019 às 18:05
  • @FelipeAvelar Esse e retorno DATA: [object Object] Commented 8/10/2019 às 18:13
  • 1
    Pelo que eu tou vendo, data é um tipo array. Caso você queira pegar só o primeiro elemento, tenta mudar no loadRepositories para const {nome, nascimento, email, telefone, endereco} = data[0];. Entretanto, caso você tenha acesso ao backend, seria interessante retornar apenas o usuário que tu queres. Commented 8/10/2019 às 18:32
  • @FelipeAvelar Funcionou cara! Muito obrigado. O pior é que eu ja tinha tentado algo do tipo. Commented 8/10/2019 às 18:37

1 Resposta 1

3

Conforme conversado nos comentários, o problema é que data é um vetor retornado do servidor, portanto desestruturar não vai funcionar se você não disser qual índice do vetor você quer desestruturar. Para corrigir o problema basta alterar a linha:

const {nome, nascimento, email, telefone, endereco} = data;

para:

const {nome, nascimento, email, telefone, endereco} = data[0];

Caso você queira o primeiro elemento do vetor. Entretanto, algumas observações são importantes.

  1. Caso você tenha acesso ao backend da aplicação, é interessante que você crie uma rota que retorne um único usuário, para não precisar ficar acessando o primeiro elemento do vetor;
  2. Caso não tenha como alterar a rota, é necessário verificar se existe algum elemento no vetor, caso contrário fazer os tratamentos necessários para que a sua aplicação não pare de funcionar.

EDIÇÃO

Como você está usando o moongose, pelo que eu entendi do seu controlador, a rota index deve retornar uma lista, enquanto a rota find retorna somente um usuário, considerando que email deve ser uma chave única de usuário. Nesse caso, basta substituir:

await Usuario.find({ email: req.params.email });

por:

await Usuario.findOne({ email: req.params.email });

Entretanto, é importante ressaltar que o findOne retornará o primeiro elemento encontrado, caso exista mais de um e, caso não existe nenhum, retornará null. Portanto, é importante ter certeza que o campo que está sendo buscado é único, caso contrário, podem existir resultados indesejados.

2
  • @FelpeAvelar Valeu cara, aceitei a resposta e ainda dei um voto positivo para ela :) mas não posso fazer isso certo? const {nome, nascimento, email, telefone, endereco} = await api.get( /usuarios/email/${username}, ); this.setState({nome, nascimento, email, telefone, endereco}); Tentei mas ele não carregou nada na tela. Se achou a pergunta interessante de um up nela ai brother... Commented 8/10/2019 às 19:34
  • Não, porque o objeto que ele está retornando é um response, deve dar se tu colocar um .data no final do teu api.get, mas aglomerar muito código numa linha só torna ele ilegível, o idela seria destruturar o response numa constante data e depois desestruturar essa constante, já que ficaria mais claro para outro desenvolvedor que está pegando teu código (: Commented 8/10/2019 às 19:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .