#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>))</>)