无法在本机反应中显示获取数据答案

【问题标题】：Not able to display fetch data in react native无法在本机反应中显示获取数据
【发布时间】：2021-09-23 12:32:49
【问题描述】：

我遇到了问题，无法在我的屏幕上显示 fetch API 数据，谁能告诉我如何显示数据，请尝试修复我的代码，如果您有任何疑问，请随时提问。

我正在使用 nytimes api 获取数据

import React, { useEffect, useState } from 'react';
import { Text, View, FlatList, StyleSheet } 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://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=9OTXA7aqliGSkwHKCACiw0SLkmfzMB6g`
      );
      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 style={styles.customText}> {item.json}</Text>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  customText: {
    padding: 10,
    marginTop: 20,
    textAlign: 'center',
    backgroundColor: 'lightgray',
    fontWeight: 'bold',
  },
});

【问题讨论】：

您不应在公共论坛上发布您的 API 密钥

标签： css react-native expo

【解决方案1】：

首先，您不应该在公共论坛上发布您的私有 API 密钥。

现在来解决您的问题，您应该给FlatList 一个Array 循环。 FlatList 组件将循环遍历数组中的每个项目，您可以使用 renderItem 显示它们。快速查看您的 API 表明您收到的 API 响应是 Object，而不是 Array。

您可能希望在FlatList 中循环遍历books 数组。将您的 getMovies 函数更改为，

const getMovies = async () => {
  try {
    const response = await fetch(
      `https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=9OTXA7aqliGSkwHKCACiw0SLkmfzMB6g`
    );
    const json = await response.json();
    setData(json.results.books); // changed json to the specific key in your api response.
  } catch (error) {
    console.error(error);
  }
};

在你的FlatList，你可以使用，

<FlatList
  data={data}
  keyExtractor={(item) => item.book_uri}
  renderItem={({ item }) => (
    <Text style={styles.customText}>{item.title}</Text> // to display title.. like this map all your data based on the key received in api response.
  )}
/>

【讨论】：

【解决方案2】：

试试

<FlatList
  data={data}
  keyExtractor={(item) => id}
  renderItem={({ item }) => <Text style={styles.customText}> {item.json}</Text>}
/>

如果 id 不是字符串，则使用 id.toString()。

【讨论】：