获取 API 未在本机反应中显示我的输出答案

【问题标题】：Fetch api not displaying my output in react native获取 API 未在本机反应中显示我的输出
【发布时间】：2021-09-23 06:50:22
【问题描述】：

在获取用户数据并显示为输出时遇到问题，我使用的是假 API。不知道哪里错了，请尝试解决我的问题。如果您有任何疑问，请随时询问。

import React, { useEffect, useState } from 'react';
import { Text, View, FlatList } from 'react-native';
// import { Card, Title, Paragraph } from 'react-native-paper';
import { Searchbar } from 'react-native-paper';

export default function Home() {
  const [searchquery, setSearchquery] = React.useState();
  const [data, setData] = useState([]);

  const getMovies = async () => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/users'
      );
      const json = await response.json();
      setData(json.users);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    getMovies();
  }, []);

  return (
    <View>
      <Searchbar
        placeholder="Search Books"
        onChangeText={(query) => setSearchquery(query)}
        value={searchquery}
        style={{ marginTop: 30, marginHorizontal: 10 }}
      />
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => id}
        renderItem={({ item }) => <Text>{item.city}</Text>}
      />
    </View>
  );
}

【问题讨论】：

标签： css react-native expo

【解决方案1】：

setData(json.users); 尝试setData(json) 和renderItem={({ item }) => <Text>{item.city}</Text>} 试试renderItem={({ item }) => <Text>{item.address.city}</Text>}

【讨论】：

【解决方案2】：

尝试像这样处理响应：

const response = await fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(res => console.log(res)) //maybe need to JSON.Stringify() it
.catch(err => console.log("Error: " + err))

您应该以这种方式得到响应，并且可以将其存储在第二个然后阻塞。

【讨论】：

【解决方案3】：

安装在 {item.city} 试试 {item.address["city"]}

【讨论】：