在 React Native 中使用 axios 綁定到 api 的組件不呈現的問題

Question

我第一次嘗試在原生反應中使用帶有 axios 的 api。

我的目標是從這個 api ( https://servicodados.ibge.gov.br/api/v1/localidades/estados/ ) 在屏幕上展示州的名稱，但是，當我只用一個 { date.name}，但不顯示內容。

我會做錯什么？

 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> </> ); };

應用圖片

Answer 1

嗨，您犯了一個錯誤，使用 {} ，我們必須返回，而且我們使用 item 來訪問數據而不是數據，如下所示：

{data.map((item) => {
      return(
      <Text>{item.nome}</Text>
       );
    })}

但是，如果您不想使用 return 使用：

 {data.map((item) => (
          <Text>{item.nome}</Text>;
        ))}

快樂編碼！

Answer 2

您正在映射data ，因此請從item中調用名稱，嘗試：

{data.map((item) => {
    <Text>{item.nome}</Text>
})}