React Native - 尝试提取数据并存储在变量中

Question

enter image description here我是 react-native 的新手。我试图使用 fetch 访问 API。我能够在控制台上打印结果，但无法在移动屏幕上打印。我附上了下面练习代码的截图。 [在此处输入图片描述][2]

import React from 'react'
import { StyleSheet, Text, SafeAreaView} from 'react-native'

const getMoviesFromApi = () => {
  //GET request
  fetch('https://reactnative.dev/movies.json', {
    method: 'GET',
    //Request Type
    //method: 'POST',
  })
    .then((response) => response.json())
    //If response is in json then in success
    .then((responseJson) => {
      //Success
     // alert(JSON.stringify(responseJson));
      //console.log(responseJson);
      return responseJson;
    })
}

const App = () => {
    let data = getMoviesFromApi()
    console.log(data)

     return (

        <SafeAreaView>
          <Text> JSON.stringify{data} </Text>

          {/* <Text> JSON.stringify{parseData} </Text> */}
        </SafeAreaView>
     )
}

const styles = StyleSheet.create({})

export default App

Answer 1

您想使用useState 并将您从 api 接收的数据保存在状态中，并使用useEffect 在状态更新时获取数据，UI 也会如此

所以我会使用这样的东西：

import { useState, useEffect } from 'react';

const App = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      const data = await getMoviesFromApi();
      setMovies(data); // I supose it's an array of movies
    }
  }, [getMoviesFromApi])

  return (...);
}