You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Quando tento montar a tela de Incidents, não consigo completar a requisição get da API. Servidores estão ligados e funcionando normalmente. Vou colar a mensagem de erro do terminal e o screenshot do celular.
Erro do terminal rodando o expo:
`[Unhandled promise rejection: Error: Request failed with status code 404]
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/core/settle.js:16:9 in settle
- node_modules/axios/lib/adapters/xhr.js:52:6 in handleLoad
- node_modules/event-target-shim/dist/event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:566:23 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:388:25 in didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:190:12 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue`
Erro no emulador do iOS:
Arquivo api.js:
import axios from 'axios';
const api = axios.create({
baseURL: 'http://192.168.15.27:3333'
});
export default api;
Arquivo Incidents/index.js
import React, { useState, useEffect } from 'react';
import { Feather } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import { View, Image, Text, TouchableOpacity, FlatList } from 'react-native';
// Importar a logo
import logoImg from '../../assets/logo.png';
// Importar styles
import styles from './styles';
// Importar a api
import api from '../../services/api';
export default function Incidents() {
// Armazenar estado dos incidents
const [incidents, setIncidents] = useState([]);
// Armazenar estado do número total de incidentes, sendo 0 o padrão
const [total, setTotal] = useState(0);
// Armazenar estado do número da página, sendo 1 a padrão
const [page, setPage] = useState(1);
// Armazenar estado de loading, para armazenar informação de quando estivermos buscando dados, para não carregarmos mais de 1 página por vez.
const [loading, setLoading] = useState(false);
// semelhante ao useHistory, para lembrar da última tela navegada
const navigation = useNavigation();
function navigateToDetail(incident) {
navigation.navigate('Detail', { incident });
}
async function loadIncidents () {
// Se loading estiver como true, parar função. Para evitar que se uma requisição estiver sendo feita, outra requisição seja iniciada
if (loading) {
return;
}
// Se o total for maior que zero (ou seja, já foi carregada pelo menos a 1a pag) e o número de incidentes seja igual ao total, parar a função.
if (total > 0 && incidents.length === total ) {
return;
}
// Marcar como início do loading (true)
setLoading(true);
const response = await api.get('incidents>page=', {
params: { page }
});
// Anexar os incidents já buscados aos que serão buscados na próxima requisição
setIncidents([... incidents, ... response.data]);
setTotal(response.headers['x-total-count']);
// Aumentar o contador de páginas para a próxima requisição
setPage(page += 1);
// Marcar como fim do loading (false)
setLoading(false);
}
useEffect(() => {
loadIncidents();
}, []);
return (
<View style={styles.container}>
<View style={styles.header}>
<Image source={logoImg} />
<Text style={styles.headerText}>
Total de <Text style={styles.headerTextBold}>{total} casos</Text>.
</Text>
</View>
<Text style={styles.title}>Bem-vindo!</Text>
<Text style={styles.description}>Escolha um dos casos abaixo e salve o dia.</Text>
{/* FlatList é usado para conseguir fazer a rolagem dos itens de uma lista */}
<FlatList
data ={incidents}
style={styles.incidentList}
keyExtractor={incident => String(incident.id)}
// Tirar o símbolo de scroll da tela
// showsVerticalScrollIndicator={false}
// Propriedade que aceita uma função que é disparada de forma automática quando um usuário chega ao final de uma lista
onEndReached={loadIncidents}
// Propriedade que define o quantos % do final da lista o usuário precisa estar para que carregue novos itens, definido de 0 a 1.
onEndReachedThreshold={0.2}
renderItem={({ item: incident }) => (
<View style={styles.incident}>
<Text style={styles.incidentProperty}>ONG:</Text>
<Text style={styles.incidentValue}>{incident.name}</Text>
<Text style={styles.incidentProperty}>CASO:</Text>
<Text style={styles.incidentValue}>{incident.title}</Text>
<Text style={styles.incidentProperty}>VALOR:</Text>
<Text style={styles.incidentValue}>
{Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
}).format(incident.value)}
</Text>
<TouchableOpacity
style={styles.detailsButton}
onPress={() => navigateToDetail(incident)}
>
<Text style={styles.detailsButtonText}>Ver mais detalhes</Text>
<Feather name="arrow-right" size={16} color='#e02041' />
</TouchableOpacity>
</View>
)}
/>
</View>
);
}
The text was updated successfully, but these errors were encountered:
Pra mim o mesmo erro ocorre e não consigo resolvê-lo... código está praticamente igual.
Acredito ser um erro de rede.
Poderia dizer como resolveu @brucruz ?
Quando tento montar a tela de Incidents, não consigo completar a requisição get da API. Servidores estão ligados e funcionando normalmente. Vou colar a mensagem de erro do terminal e o screenshot do celular.
Erro do terminal rodando o expo:
Erro no emulador do iOS:
Arquivo api.js:
Arquivo Incidents/index.js
The text was updated successfully, but these errors were encountered: