React Native使用Fetch API调用模拟接口无法正常显示输出问题求助

问题修复说明 #

你代码里共有3处导致无数据渲染的问题，修改点如下：

• 接口返回结构错误：https://jsonplaceholder.typicode.com/users 接口直接返回用户数组，没有嵌套在users字段下，原代码setData(json.users)会把data赋值为undefined，改为setData(json)即可。
• 字段取值路径错误：用户的城市属性嵌套在address对象中，直接取item.city无法拿到值，需要改为item.address.city。
• 搜索状态初始化错误：searchquery没有设置初始值，默认是undefined，作为受控组件的value会触发运行时警告，初始化时赋值为空字符串即可。

修复后完整代码 #

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);
    } 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.address.city}</Text>}
      />
    </View>
  );
}

内容的提问来源于stack exchange，提问作者Monu Patil