Выполнение нескольких запросов ax ios для получения разных данных и ввода в несколько разделов экрана в React Native - PullRequest
Новая
       8

Выполнение нескольких запросов ax ios для получения разных данных и ввода в несколько разделов экрана в React Native

0 голосов
/ 08 мая 2020

Я пытаюсь получить данные и ввести их на тот же экран. Например, у меня будет «ПОПУЛЯРНЫЕ ФИЛЬМЫ» с разделом из 10 фильмов, а затем под ним «РЕКОМЕНДУЕМЫЕ ФИЛЬМЫ» и 10 фильмов, которые рекомендуется поместить в этот раздел, а под ним раздел «НОВЫЕ ФИЛЬМЫ» и т. Д. и так далее. Но я не знаю, каковы лучшие практики и как их реализовать. Я знаю только, как достичь одной конечной точки за раз и получить данные для этой одной точки. На данный момент я получаю только ПОПУЛЯРНЫЕ ФИЛЬМЫ, потому что это тот, который я указал в своем вызове API, но как получить другую информацию? Нужно ли мне делать несколько запросов на одном экране? Пожалуйста, посмотрите мой код ниже. Я искал в Интернете, но, похоже, никто не задает такой вопрос ... lol. В любом случае, спасибо!

Я пытаюсь получить это вот так! Где у вас есть данные для "Избранные", "Выбор персонала", "Новые поступления" и т. Д. c. enter image description here

import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, FlatList, TouchableOpacity} from "react-native";
import MovieItem from "../components/MovieItem";
import axios from "axios";
import {} from "@react-navigation/native"

const HomeScreen =({navigation})=> {
    const API_KEY1="....";
    const API_KEY2=".....";
    const [movies, setMovies] = useState([]);


    useEffect(()=> {
        const fetchData = async () => {
            const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY2}`);
            setMovies(response.data.results);
            console.log("MOVIESSS!!!", movies)
            console.log("RESPONSE.DATA!!!!" ,response.data)
            console.log("RESPONSE.DATA.Resultsssss!!!!" ,response.data.results.map(movie=> console.log(movie.original_title)))
        }

        fetchData();

    }, [])


    return(
        <View style={styles.screen}>
            <Text>PPOPULAR MOVIES</Text>
            <FlatList data={movies} renderItem={({item})=> {
                return(
                    <View>
                    <TouchableOpacity onPress={()=>navigation.navigate("MovieItem", {item})}>
                        <MovieItem item={item}/>
                    </TouchableOpacity>
                    </View>
                )
            }}/>

        </View>
    )
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent:"center",
        alignItems:"center"
    }
})

export default HomeScreen;

enter image description here

1 Ответ

1 голос
/ 08 мая 2020

у вас есть два варианта,

  1. измените ваши три конечные точки на одну конечную точку, например /feed, которая возвращает что-то вроде этого 
{
  "popular" : [... list of 10 popular movies],
  "recommended": [... list of recommended movies],
  "newest": [... list of newest movies]
}
В своем useEffect добавьте еще две внутренние функции и вызовите их синхронно 
const [recommended, setRecommended] = useState([]);
const [newest, setNewest] = useState([]);
useEffect(()=> {
  const fetchData = async () => {
  const response = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY2}`);
  setMovies(response.data.results);
  console.log("MOVIESSS!!!", movies)
  console.log("RESPONSE.DATA!!!!" ,response.data)
  console.log("RESPONSE.DATA.Resultsssss!!!!" ,response.data.results.map(movie=> console.log(movie.original_title)))
  }
  const fetchRecommended = async () { 
    const resp = await axios("//getrecommended");
    setRecommended(resp.data])
  }
  const fetchNewest = async () { 
    const resp = await axios(//getnewest");
    setNewest(resp.data)
  }
  fetchData();
  fetchRecommended();
  fetchNewest();
}, [])

Хотя лично я бы предпочел вариант 1

...