在不使用 React State 的情况下访问 React Native 中获取的数据答案

【问题标题】：Accessing fetched data in React Native without using React State在不使用 React State 的情况下访问 React Native 中获取的数据
【发布时间】：2020-09-01 15:43:56
【问题描述】：

我有一个 typescript 函数，它负责使用 React Native fetch 函数从 NASA api 获取数据并返回一个具有 Item[] 类型的自定义对象。问题是这个函数返回的对象总是[]。 responseData.collection.items 在最初设置 Item[] 类型的状态变量时有效，因此它不是映射问题。

但是，我希望这是任何 React 组件之外的单独打字稿函数，因此我不能使用状态。

在不使用 React Native 状态的情况下，在 typescript 中访问获取的 JSON 响应数据的正确方法是什么？

import { Item } from "../types/data"

export function fetchData(searchTerm: string): Item[] {
let result: Item[] = []
fetch(`https://images-api.nasa.gov/search? q=${searchTerm}&media_type=image`)
            .then(response => response.json())
            .then((responseData) => {
              result = responseData.collection.items
            })
            .catch((error) => {
              console.error(error);
            })
            return result
 }

【问题讨论】：

您打算如何处理这些数据？

标签： javascript typescript react-native

【解决方案1】：

你可以创建一个异步函数：

import { Item } from "../types/data"

export async function fetchData(searchTerm: string): Promise<Item[]> {
  
  const response = await fetch(`https://images-api.nasa.gov/search?q=${searchTerm}&media_type=image`)
  const responseResult = await response.json()
  return result.collection.items as Item[]
 
 }

现在该函数返回一个承诺，所以无论您需要什么数据：

import { fetchData } from './path/to/file.ts'

fetchData(searchTerm)
   .then((items: Item[]) => {
      // Here you have access to your items and you can do whatever you need with them
   })
   .catch(err => console.warn(err)

【讨论】：