React Native — попытка извлечь данные и сохранить их в переменной

#javascript #reactjs #react-native

Вопрос:

введите описание изображения здесь Я новичок в react-native. Я пытался получить доступ к API с помощью fetch. Я смог распечатать результат на консоли, но не смог распечатать его на экране мобильного устройства. Я приложил скриншот кода практики ниже. [введите описание изображения здесь][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 

Ответ №1:

Вы хотите использовать useState и сохранять данные, которые вы получаете от api, внутри состояния, а useEffect также извлекать данные при обновлении состояния, как и пользовательский интерфейс

Поэтому я бы использовал что-то вроде этого:

 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 (...);
}
 

Комментарии:

1. Спасибо вам за информацию. Итак, я сделал <Текст> JSON.stringify{данные} <Текст></Текст> внутри функции возврата, и она выдает ошибку. Итак, я задавался вопросом, что я сделал не так?

2. Если вы console.log(data) , то какая у вас структура?

3. В любом случае вы хотите отобразить свой массив и вывести нужный JSX. Например: return (<>movies.map(movie => (<Text>movie.name</Text>))</>)