css - 获取 api 未在本机反应中显示我的输出

Question

在获取用户数据并显示为输出时遇到问题，我正在使用假 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>
  );
}

标签： cssreact-nativeexpo

Answer 1

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