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:
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);
loadRepositories
paraconst {nome, nascimento, email, telefone, endereco} = data[0];
. Entretanto, caso você tenha acesso ao backend, seria interessante retornar apenas o usuário que tu queres.