Estoy usando Promise.all para obtener varias API.
const ListScreen = () => { const first = fetch('https://EXAMPLEAPI').then(resp => resp.json()) const second = fetch('https://EXAMPLEAPI').then(resp => resp.json()) const third = fetch('https://EXAMPLEAPI').then(resp => resp.json()) const retrieveAll = async function () { let results = await Promise.all([first, second, third])Cuando console.log (resultados), obtengo todas las matrices de objetos de apis
El problema es que cuando creo una FlatList, no obtengo nada para mostrar en la pantalla (en blanco)
const retrieveAll = async function () { let results = await Promise.all([first, second, third]) return ( <FlatList keyExtractor={item => item.title} data={results} renderItem={({ item }) => { return <Text>{item.title}</Text> }} /> ) };}
exportar ListScreen predeterminado;
¿Qué estoy haciendo mal?
Por favor ayuda. :(
Necesita re-render el componente, para eso tendrá que usar los Hooks de reacción.
Así es como se verá el componente
const RetrieveAll = function () { const [ results, setResults ] = useState([]) useEffect( () => { Promise.all([first, second, third]) .then(response => { setResults(response) }) }, []) return ( <FlatList keyExtractor={item => item.title} data={results} renderItem={({ item }) => { return <Text>{item.title}</Text> }} /> ) };Uso
<RetrieveAll /> E intente no crear elementos JSX async .