[英]Problem with component bound to an api with axios in React Native not rendering
I'm for the first time trying to consume an api with axios in react native.我第一次尝试在原生反应中使用带有 axios 的 api。
My goal is to demonstrate the name of the state on the screen, from this api ( https://servicodados.ibge.gov.br/api/v1/localidades/estados/ ), however, when I map it with only a {date.name}, but the content is not displayed.我的目标是从这个 api ( https://servicodados.ibge.gov.br/api/v1/localidades/estados/ ) 在屏幕上展示州的名称,但是,当我只用一个 { date.name},但不显示内容。
What would I be doing wrong?我会做错什么?
import React, { useEffect, useState } from "react"; import { Icon } from "react-native-elements"; import { View, TextInput, ScrollView, FlatList, Text } from "react-native"; import { Container, SearchInput, SearchInputText } from "./styles"; import Header from "../../components/Header"; import DashedCircle from "../../components/DashedCircle"; import axios from "axios"; export default (props) => { const [data, setData] = useState([]); useEffect(() => { async function fetchData() { const response = await axios.get( "https://servicodados.ibge.gov.br/api/v1/localidades/estados/" ); setData(response.data); } fetchData(); }, []); console.log(data); return ( <> <DashedCircle /> <Container> <Header onPress={() => props.navigation.goBack()} /> <SearchInput> <SearchInputText placeholder="Buscar estado" /> <Icon name="search-outline" type="ionicon" color="#c4c4c4" style={{ paddingHorizontal: 15, paddingVertical: 15, }} /> </SearchInput> {data.map((item) => { <Text>{data.nome}</Text>; })} </Container> </> ); };
Hi You are doing one mistake , which using {} , we have to return and also instead of data we are using item to access the data like this :嗨,您犯了一个错误,使用 {} ,我们必须返回,而且我们使用 item 来访问数据而不是数据,如下所示:
{data.map((item) => {
return(
<Text>{item.nome}</Text>
);
})}
But if you don't want to use return use :但是,如果您不想使用 return 使用:
{data.map((item) => (
<Text>{item.nome}</Text>;
))}
Happy Coding !!快乐编码!
You are mapping data
so call the name from item
, try:您正在映射data
,因此请从item
中调用名称,尝试:
{data.map((item) => {
<Text>{item.nome}</Text>
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.