Question

[关闭] 如何从不必要的承诺对象中获取“英语”

异步功能->参数化


const getLanguageNamefromCode = async (lng_code) => {
  let response, langData, lang;
  try {
    response = await fetch(
      `https://restcountries.eu/rest/v2/lang/${lng_code}?fields=languages`
    );
    langData = await response.json();
    // console.log(langData[0].languages[0]);
    if (langData[0].languages[0].iso639_1 === lng_code) {
      lang = langData[0].languages[0].name;
      console.log(lang);
    }
    return lang;
  } catch (err) {
    throw new Error(err);
  }
};

从for循环内部调用并发送参数

      const loadedTrendingMovies = [];
      const loadedTrendingMoviesLength = trendingMovies.results.length;

      for (let i = 0; i < 6; i++) {
        // let credits;
        hasUserSaved = getState().UserMovies.userMovies.find(
          (userMovie) =>
            userMovie.id === trendingMovies.results[i].id.toString()
        );

        loadedTrendingMovies.push(
          new Movie(
            trendingMovies.results[i].id.toString(),
            trendingMovies.results[i].media_type === "movie"
              ? trendingMovies.results[i].title
              : trendingMovies.results[i].name,
            posterBaseUrl + trendingMovies.results[i].poster_path,
            trendingMovies.results[i].media_type === "movie"
              ? trendingMovies.results[i].release_date
              : trendingMovies.results[i].first_air_date,
            [],
            trendingMovies.results[i].overview,
            trendingMovies.results[i].vote_average,
            getLanguageNamefromCode(trendingMovies.results[i].original_language),
            hasUserSaved ? hasUserSaved.location : ""
          )
        );
      }

如何从getLanguagefromCode异步方法返回的承诺中获取值。

这是我的MoviesScreen功能组件，我正在使用redux

import React, { useEffect, useCallback, useState, useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ScrollView,
  StatusBar,
  TouchableWithoutFeedback,
  RefreshControl,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import MovieItem from "../components/MovieItem";
import { useSelector, useDispatch } from "react-redux";
import * as MoviesAction from "../store/actions/MoviesAction";
import * as UserActions from "../store/actions/UserActions";
import Colors from "../constants/Colors";

import { useScrollToTop } from "@react-navigation/native";

import SkeletonContent from "react-native-skeleton-content";
import { createSelector } from "reselect";

const stories = createSelector(
  (state) => state.Movies.movies,
  (movies) => movies
);
const newReleases = createSelector(
  (state) => state.Movies.new_releases,
  (new_releases) => new_releases
);
const newTVShows = createSelector(
  (state) => state.Movies.new_tv_shows,
  (new_tv_shows) => new_tv_shows
);
const Anime = createSelector(
  (state) => state.Movies.anime,
  (anime) => anime
);
const MoviesScreen = (props) => {
  const Stories = useSelector(stories);
  const new_releases = useSelector(newReleases);
  console.log(" movie screen rendered", new_releases);
  const new_tv_shows = useSelector(newTVShows);
  const anime = useSelector(Anime);

  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  const dispatch = useDispatch();
  const scrollRef = useRef(null);

  useScrollToTop(scrollRef);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    loadScreen().then(() => setRefreshing(false));
  }, [setRefreshing, loadScreen]);

  const loadScreen = useCallback(async () => {
    try {
      dispatch(MoviesAction.loadAll());
    } catch (err) {
      console.log(err);
    }
  }, []);

  useEffect(() => {
    setLoading(true);
    loadScreen().then(() => setLoading(false));
  }, []);

  const renderTrendingMoviesItem = ({ item }) => (
    <SkeletonContent
      boneColor="#303030"
      highlightColor="#252525"
      containerStyle={styles.new_releases}
      isLoading={loading || refreshing}
      layout={[styles.cinemaSkeleton]}
    >
      <MovieItem
        style={styles.new_releases}
        id={item.id}
        movieTitle={item.title}
        posterUrl={item.posterUrl}
        year={item.year}
        onPress={() => {
          props.navigation.navigate({
            name: "MoviesDetailScreen",
            params: {
              movieId: item.id,
              movieTitle: item.title,
              moviesType: "Movies",
            },
          });
        }}
      />
    </SkeletonContent>
  );

  const renderStoriesItem = ({ item }) => (
    <SkeletonContent
      boneColor="#303030"
      highlightColor="#252525"
      containerStyle={{
        ...styles.storyItem,
        marginHorizontal: 10,
        marginVertical: 7.5,
      }}
      isLoading={loading || refreshing}
      layout={[
        {
          key: "story",
          width: 80,
          height: 80,
          borderRadius: 40,
          marginHorizontal: 10,
          marginVertical: 7.5,
        },
      ]}
    >
      <MovieItem
        style={styles.storyItem}
        footerStyle={{ opacity: 0 }}
        imageStyle={styles.storyImage}
        id={item.id}
        posterUrl={item.posterUrl}
        onPress={() => {
          props.navigation.navigate({
            name: "NewReleasesModalScreen",
            params: {
              movieTitle: item.title,
              posterUrl: item.posterUrl,
              movieId: item.id,
            },
          });
        }}
      />
    </SkeletonContent>
  );

  const renderTrendingTVItem = ({ item }) => (
    <SkeletonContent
      boneColor="#303030"
      highlightColor="#252525"
      containerStyle={styles.new_releases}
      isLoading={loading || refreshing}
      layout={[styles.cinemaSkeleton]}
    >
      <MovieItem
        style={styles.new_releases}
        id={item.id}
        movieTitle={item.title}
        posterUrl={item.posterUrl}
        year={item.year}
        onPress={() => {
          props.navigation.navigate({
            name: "MoviesDetailScreen",
            params: {
              movieId: item.id,
              movieTitle: item.title,
              moviesType: "TV",
            },
          });
        }}
      />
    </SkeletonContent>
  );

  const renderAnimeItem = ({ item }) => (
    <SkeletonContent
      boneColor="#303030"
      highlightColor="#252525"
      containerStyle={styles.new_releases}
      isLoading={loading || refreshing}
      layout={[styles.cinemaSkeleton]}
    >
      <MovieItem
        style={styles.new_releases}
        id={item.id}
        movieTitle={item.title}
        posterUrl={item.posterUrl}
        year={item.year}
        onPress={() => {
          props.navigation.navigate({
            name: "MoviesDetailScreen",
            params: {
              movieId: item.id,
              movieTitle: item.title,
              moviesType: "anime",
              goToAnime: true,
            },
          });
        }}
      />
    </SkeletonContent>
  );

  return (
    <ScrollView
      ref={scrollRef}
      style={styles.screen}
      showsVerticalScrollIndicator={false}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          tintColor={Colors.lightblue}
        />
      }
    >
      {/* new releases stories */}
      <StatusBar barStyle="light-content" />
      <SkeletonContent
        boneColor="#303030"
        highlightColor="#252525"
        containerStyle={styles.headerCont}
        isLoading={loading || refreshing}
        layout={[styles.headerTextSkeleton]}
      >
        <View style={styles.headerCont}>
          <Text style={styles.headerText}> New Releases </Text>
        </View>
      </SkeletonContent>
      <View>
        <FlatList
          keyExtractor={(item) => item.id}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          data={Stories}
          renderItem={renderStoriesItem}
        />
      </View>

      {/* new releases stories */}
      {/*...

      TOP MOVIE THAT WEEK 

      ...
      */}

      <View>
        <SkeletonContent
          boneColor="#303030"
          containerStyle={styles.headerCont}
          highlightColor="#252525"
          containerStyle={styles.headerCont}
          isLoading={loading || refreshing}
          layout={[styles.headerTextSkeleton]}
        >
          <View style={styles.headerCont}>
            <TouchableWithoutFeedback
              onPress={() => {
                props.navigation.navigate({
                  name: "SeeAllScreen",
                  params: {
                    new_releases: true,
                    headerTitle: "Trending Movies",
                  },
                });
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <Text style={styles.headerText}> Movies </Text>
                <Ionicons
                  style={{ marginStart: 5 }}
                  name="ios-arrow-forward"
                  size={22}
                  color={Colors.lightblue}
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
        </SkeletonContent>
        <FlatList
          keyExtractor={(item) => item.id}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          data={new_releases}
          renderItem={renderTrendingMoviesItem}
        />
      </View>

      {/* TV SHOWS */}

      <View>
        <SkeletonContent
          boneColor="#303030"
          containerStyle={styles.headerCont}
          highlightColor="#252525"
          containerStyle={styles.headerCont}
          isLoading={loading || refreshing}
          layout={[styles.headerTextSkeleton]}
        >
          <View style={styles.headerCont}>
            <TouchableWithoutFeedback
              onPress={() => {
                props.navigation.navigate({
                  name: "SeeAllScreen",
                  params: {
                    new_tv_shows: true,
                    headerTitle: "Trending TV Shows",
                  },
                });
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <Text style={styles.headerText}> TV Shows </Text>
                <Ionicons
                  style={{ marginStart: 5 }}
                  name="ios-arrow-forward"
                  size={22}
                  color={Colors.lightblue}
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
        </SkeletonContent>
        <FlatList
          keyExtractor={(item) => item.id}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          data={new_tv_shows}
          renderItem={renderTrendingTVItem}
        />
      </View>

      {/* Anime */}

      <View>
        <SkeletonContent
          boneColor="#303030"
          containerStyle={styles.headerCont}
          highlightColor="#252525"
          containerStyle={styles.headerCont}
          isLoading={loading || refreshing}
          layout={[styles.headerTextSkeleton]}
        >
          <View style={styles.headerCont}>
            <TouchableWithoutFeedback
              onPress={() => {
                props.navigation.navigate({
                  name: "SeeAllScreen",
                  params: {
                    moviesType: "anime",
                    goToAnime: true,
                    headerTitle: "Trending Anime",
                  },
                });
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <Text style={styles.headerText}> Anime </Text>
                <Ionicons
                  style={{ marginStart: 5 }}
                  name="ios-arrow-forward"
                  size={22}
                  color={Colors.lightblue}
                />
              </View>
            </TouchableWithoutFeedback>
          </View>
        </SkeletonContent>
        <FlatList
          keyExtractor={(item) => item.id}
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          data={anime}
          renderItem={renderAnimeItem}
        />
      </View>
    </ScrollView>
  );
};

这是动作文件


import React, { useState } from "react";

export const SEARCH_MOVIES = "SEARCH_MOVIES";
export const LOAD_MOVIES_WITH_GENRES = "LOAD_MOVIES_WITH_GENRES";
export const CLEAR_SEARCH_LIST = "CLEAR_SEARCH_LIST";
export const CLEAR_GENRE_SCREEN = "CLEAR_GENRE_SCREEN";
export const LOAD_ALL = "LOAD_ALL";

import Movie from "../../models/Movie";

import config from "../../config";
import Cast from "../../models/CastMember";

const getCredits = async (index) => {
  let response, creditsData;
  try {
    response = await fetch(
      `https://api.themoviedb.org/3/tv/${resData.results[index].id}?api_key=${config.TMDB_API_KEY}&language=en-US&append_to_response=credits`
    );
    creditsData = await response.json();
    // console.log("credits", creditsData);
  } catch (err) {
    throw new Error(err);
  }

  const castMembers = [];
  const length =
    creditsData.credits.cast.length > 10 ? 10 : creditsData.credits.cast.length;

  for (let i = 0; i < 6; i++) {
    castMembers.push(
      new Cast(
        creditsData.credits.cast[i].id,
        creditsData.credits.cast[i].character,
        creditsData.credits.cast[i].name,
        posterBaseUrl + creditsData.credits.cast[i].profile_path
      )
    );
  }

  console.log(castMembers);

  return { cast: castMembers };
};

const getLanguageNamefromCode = async (lng_code) => {
  let response, langData, lang;
  try {
    response = await fetch(
      `https://restcountries.eu/rest/v2/lang/${lng_code}?fields=languages`
    );
    langData = await response.json();
    // console.log(langData[0].languages[0]);
    if (langData[0].languages[0].iso639_1 === lng_code) {
      lang = langData[0].languages[0].name;
      console.log(lang);
    }
    return lang;
  } catch (err) {
    throw new Error(err);
  }
};

export const clearSearchList = () => {
  return { type: CLEAR_SEARCH_LIST };
};

export const clearGenreScreen = () => {
  return {
    type: CLEAR_GENRE_SCREEN,
  };
};

export const loadAll = () => {
  const posterBaseUrl = "http://image.tmdb.org/t/p/w185";
  let hasUserSaved;
  const loadedStories = [];
  return async (dispatch, getState) => {
    try {
      //stories response
      const moviesResponse = await fetch(
        `https://www.omdbapi.com/?apikey=${config.OMDB_API_KEY}&s=tokyo`
      );
      // trending movies
      const TrendingMoviesResponse = await fetch(
        `https://api.themoviedb.org/3/trending/all/day?api_key=${config.TMDB_API_KEY}`
      );
      // trending TV
      const trendingTVResponse = await fetch(
        `https://api.themoviedb.org/3/discover/tv?api_key=${config.TMDB_API_KEY}&language=en-US&sort_by=popularity.desc&first_air_date_year=2020&page=1&with_original_language=en`
      );
      // trending Anime
      const trendingAnimeResponse = await fetch(
        `https://kitsu.io/api/edge/trending/anime`,
        {
          method: "GET",
        }
      );

      if (
        !moviesResponse.ok ||
        !TrendingMoviesResponse.ok ||
        !trendingTVResponse.ok ||
        !trendingAnimeResponse.ok
      ) {
        throw new Error("failed response");
      }

      const movies = await moviesResponse.json();
      const trendingMovies = await TrendingMoviesResponse.json();
      const trendingTV = await trendingTVResponse.json();
      const trendingAnime = await trendingAnimeResponse.json();
      // console.log('Trending Movies',resData);
      // console.log("NEW RELEASES", resData);

      //stories array

      const loadedMoviesLength = movies.Search.length;

      for (let i = 0; i < 6; i++) {
        loadedStories.push(
          new Movie(
            movies.Search[i].imdbID,
            movies.Search[i].Title,
            movies.Search[i].Poster,
            movies.Search[i].Year
          )
        );
      }

      //trending movies array

      // console.log("loadedTrendingMovies", loadedTrendingMovies);
      let loadedTrendingMovies=[];

      const loadedTrendingMoviesLength = trendingMovies.results.length;

      // loadedTrendingMovies =
      Promise.all(
        trendingMovies.results
          .slice(0, 5) // use slice instead of a loop
          .map((
            trendingMovie // map movie to [language,movie]
          ) =>
            getLanguageNamefromCode(
              // get async language
              trendingMovie.original_language
              // resolve to [language,movie]
            ).then((language) => [language, trendingMovie])
          ) // sorry, forgot to return here
      )
        .then((
          results // results is [[language,movie],[language,movie]]
        ) =>
          results.map(([language, trendingMovie]) => {
            const hasUserSaved = getState().UserMovies.userMovies.find(
              (userMovie) => userMovie.id === trendingMovie.id.toString()
              // snippet does not have conditional chaining
            );
            return new Movie( // create new Movie
              trendingMovie.id.toString(),
              trendingMovie.media_type === "movie"
                ? trendingMovie.title
                : trendingMovie.name,
              posterBaseUrl + trendingMovie.poster_path,
              trendingMovie.media_type === "movie"
                ? trendingMovie.release_date
                : trendingMovie.first_air_date,
              [],
              trendingMovie.overview,
              trendingMovie.vote_average,
              language,
              hasUserSaved ? hasUserSaved.location : ""
            );
          })
        )
        .then((movies) => {
          // loadedTrendingMovies.push(movies);
          loadedTrendingMovies = [...loadedTrendingMovies, ...movies];
          console.log("loadedTrendingMovies", loadedTrendingMovies);
        })
        .catch((err) => console.log(err));

      // trending TV Shows
      const loadedNewTVShows = [];
      const TVShowsLength = trendingTV.results.length;

      for (let i = 0; i < 6; i++) {
        // let credits;
        hasUserSaved = getState().UserMovies.userMovies.find(
          (userMovie) => userMovie.id === trendingTV.results[i].id.toString()
        );
        // let cast = getCredits(i).then((cast) => cast);
        // console.log("CAST", cast);
        loadedNewTVShows.push(
          new Movie(
            trendingTV.results[i].id.toString(),
            trendingTV.results[i].name,
            posterBaseUrl + trendingTV.results[i].poster_path,
            trendingTV.results[i].first_air_date.toString().substr(0, 5),
            // getCredits(i).then((cast) => cast),
            // getCredits(i)
            //   .then((results) => {
            //     console.log("success", results.cast);
            //     return results.cast;
            //   })
            //   .catch((err) => console.log("cast error", err)),
            [],
            trendingTV.results[i].overview,
            trendingTV.results[i].vote_average,
            // getLanguageNamefromCode(trendingTV.results[i].original_language),
            hasUserSaved ? hasUserSaved.location : ""
          )
        );
      }

      const loadedAnime = [];
      const AnimeLength = trendingAnime.data.length;

      for (let i = 0; i < 6; i++) {
        // let credits;
        hasUserSaved = getState().UserMovies.userMovies.find(
          (userMovie) => userMovie.id === trendingAnime.data[i].id.toString()
        );
        // let cast = getCredits(i).then((cast) => cast);
        // console.log("CAST", cast);
        loadedAnime.push(
          new Movie(
            trendingAnime.data[i].id,
            trendingAnime.data[i].attributes.canonicalTitle,
            trendingAnime.data[i].attributes.posterImage.medium,
            trendingAnime.data[i].attributes.createdAt.toString().substr(0, 4),
            // getCredits(i).then((cast) => cast),
            [],
            trendingAnime.data[i].attributes.synopsis,
            trendingAnime.data[i].attributes.vote_average,
            "Japanese",
            hasUserSaved ? hasUserSaved.location : ""
          )
        );
      }

      dispatch({
        type: LOAD_ALL,
        movies: loadedStories,
        new_releases: loadedTrendingMovies,
        new_tv_shows: loadedNewTVShows,
        anime: loadedAnime,
      });
    } catch (err) {
      console.log(err);
    }
  };
};

export const searchMovies = (MovieTitle) => {
  let response;
  let hasUserSaved;
  const posterBaseUrl = "http://image.tmdb.org/t/p/w185";
  return async (dispatch, getState) => {
    try {
      response = await fetch(
        `https://api.themoviedb.org/3/search/movie?api_key=${config.TMDB_API_KEY}&query=${MovieTitle}&page=1`
      );

      if (!response.ok) {
        throw new Error("failed response");
      }

      const resData = await response.json();
      console.log("search results: ", resData);

      const searchedMovies = [];
      const length = resData.results.length;

      for (i = 0; i < length; i++) {
        hasUserSaved = getState().UserMovies.userMovies.find(
          (userMovie) => userMovie.id === resData.results[i].id
        );
        searchedMovies.push(
          new Movie(
            resData.results[i].id.toString(),
            resData.results[i].title,
            posterBaseUrl + resData.results[i].poster_path,
            resData.results[i].release_date,
            // getCredits(i).then((cast) => cast),
            [],
            resData.results[i].overview,
            resData.results[i].vote_average,
            // getLanguageNamefromCode(resData.results[i].original_language),
            hasUserSaved ? hasUserSaved.location : ""
          )
        );
      }
      dispatch({
        type: SEARCH_MOVIES,
        searched_movies: searchedMovies,
      });
    } catch (err) {
      console.log(err);
    }
  };
};

export const loadMoviesWithGenres = (genreId) => {
  let response;
  let hasUserSaved;
  const posterBaseUrl = "http://image.tmdb.org/t/p/w185";
  return async (dispatch, getState) => {
    await dispatch(clearGenreScreen());
    try {
      response = await fetch(
        `https://api.themoviedb.org/3/discover/movie?with_genres=${genreId}&api_key=${config.TMDB_API_KEY}`
      );

      if (!response.ok) {
        throw new Error("failed response");
      }

      const resData = await response.json();
      // console.log(resData);

      const loadedMoviesWRTGenre = [];
      const length = resData.results.length;

      for (let i = 0; i < length; i++) {
        hasUserSaved = getState().UserMovies.userMovies.find(
          (userMovie) => userMovie.id === resData.results[i].id.toString()
        );
        // let cast = getCredits(i).then((cast) => cast)
        // console.log("CAST", cast);
        loadedMoviesWRTGenre.push(
          new Movie(
            resData.results[i].id.toString(),
            resData.results[i].title,
            posterBaseUrl + resData.results[i].poster_path,
            resData.results[i].release_date,
            // cast,
            // getCredits(i),
            [],
            resData.results[i].overview,
            resData.results[i].vote_average,
            // getLanguageNamefromCode(resData.results[i].original_language),
            hasUserSaved ? hasUserSaved.location : ""
          )
        );
      }

      console.log("moviesWRTGenre", loadedMoviesWRTGenre);

      dispatch({
        type: LOAD_MOVIES_WITH_GENRES,
        moviesWRTGenre: loadedMoviesWRTGenre,
      });
    } catch (err) {
      console.log(err);
    }
  };
};

当我在动作文件中记录数组时，它显示出完美的结果，即

loadedTrendingMovies Array [
  Movie {
    "cast": Array [],
    "id": "385103",
    "language": "English",
    "location": "",
    "plot": "In Scooby-Doo’s greatest adventure yet, see the never-before told story of how lifelong friends Scooby and Shaggy first met and how they joined forces with young detectives Fred, Velma, and Daphne to form the famous Mystery Inc. Now, with hundreds of cases solved, Scooby and the gang face their biggest, toughest mystery ever: an evil plot to unleash the ghost dog Cerberus upon the world. As they race to stop this global “dogpocalypse,” the gang discovers that Scooby has a secret legacy and an epic destiny greater than anyone ever imagined.",
    "posterUrl": "http://image.tmdb.org/t/p/w185/zG2l9Svw4PTldWJAzC171Y3d6G8.jpg",
    "ratings": 8.3,
    "title": "Scoob!",
    "year": "2020-05-15",
  },
  Movie {
    "cast": Array [],
    "id": "79680",
    "language": "English",
    "location": "",
    "plot": "Set more than seven years after the world has become a frozen wasteland, the remnants of humanity inhabit a gigantic, perpetually-moving train that circles the globe as class warfare, social injustice and the politics of survival play out.",
    "posterUrl": "http://image.tmdb.org/t/p/w185/n6UNHZoiYj81abwmG38HbNjflDx.jpg",
    "ratings": 3,
    "title": "Snowpiercer",
    "year": "2020-05-17",
  },
  Movie {
    "cast": Array [],
    "id": "80986",
    "language": "English",
    "location": "",
    "plot": "Courtney Whitmore, a smart, athletic and above all else kind girl, discovers her step-father has a secret; he used to be the sidekick to a superhero. \"Borrowing\" the long-lost hero’s cosmic staff, she becomes the unlikely inspiration for an entirely new generation of superheroes.",
    "posterUrl": "http://image.tmdb.org/t/p/w185/JJxVsQPPiuLcArALotMHsCubeo.jpg",
    "ratings": 9,
    "title": "Stargirl",
    "year": "2020-05-18",
  },
  Movie {
    "cast": Array [],
    "id": "530915",
    "language": "English",
    "location": "",
    "plot": "At the height of the First World War, two young British soldiers must cross enemy territory and deliver a message that will stop a deadly attack on hundreds of soldiers.",
    "posterUrl": "http://image.tmdb.org/t/p/w185/AuGiPiGMYMkSosOJ3BQjDEAiwtO.jpg",
    "ratings": 7.9,
    "title": "1917",
    "year": "2019-12-25",
  },
  Movie {
    "cast": Array [],
    "id": "582596",
    "language": "English",
    "location": "",
    "plot": "A guy meets the woman of his dreams and invites her to his company's corporate retreat, but realizes he sent the invite to the wrong person.",
    "posterUrl": "http://image.tmdb.org/t/p/w185/A2YlIrzypvhS3vTFMcDkG3xLvac.jpg",
    "ratings": 6.1,
    "title": "The Wrong Missy",
    "year": "2020-05-13",
  },
]

因此我控制台登录MovieScreen组件的开头（这是我的本机应用程序启动时加载的第一个屏幕），以查看数组是否为空

 movie screen rendered Array []
 movie screen rendered Array []
 movie screen rendered Array []
 movie screen rendered Array []

我也不知道为什么控制台会记录日志，即重新渲染了4次，你有什么想法吗？

Here is its github repository if you want to check just npm install with expo

Answer 1

以下内容应该起作用（请注意，这还会返回一个解析为电影的承诺）。

   const loadedTrendingMovies = await Promise.all(
      trendingMovies.results
        .slice(0, 5) // use slice instead of a loop
        .map((trendingMovie) => // map movie to [language,movie]
          getLanguageNamefromCode(// get async language
            trendingMovie.original_language
          // resolve to [language,movie]
          ).then((language) => [language, trendingMovie]) 
        ) // sorry, forgot to return here
    ).then((results) => // results is [[language,movie],[language,movie]]
      results.map(
        ([language, trendingMovie]) =>
          new Movie( // create new Movie
            trendingMovie.id.toString(),
            trendingMovie.media_type === 'movie'
              ? trendingMovie.title
              : trendingMovie.name,
            posterBaseUrl + trendingMovie.poster_path,
            trendingMovie.media_type === 'movie'
              ? trendingMovie.release_date
              : trendingMovie.first_air_date,
            [],
            trendingMovie.overview,
            trendingMovie.vote_average,
            language,
            getState().UserMovies.userMovies.find(
              (userMovie) =>
                userMovie.id === trendingMovie.id.toString()
            // if you don't have optional chaining you can get location
            //  first the way you did before
            )?.location || '' 
          )
      )
    );

工作示例

const trendingMovies = {
  results: [
    {
      original_language: 1,
      id: 1,
    },
    {
      original_language: 2,
      id: 2,
    },
  ],
};
const getLanguageNamefromCode = (lang) =>
  Promise.resolve(`language is: ${lang}`);
function Movie(id, language, location) {
  this.id = id;
  this.language = language;
  this.location = location;
}
const getState = () => ({
  UserMovies: {
    userMovies: [{ id: '1', location: 'location 1' }],
  },
});
Promise.all(
  trendingMovies.results
    .slice(0, 5) // use slice instead of a loop
    .map((trendingMovie) =>
      // map movie to [language,movie]
      getLanguageNamefromCode(
        // get async language
        trendingMovie.original_language
        // resolve to [language,movie]
      ).then((language) => [language, trendingMovie])
    )
)
  .then((
    results // results is [[language,movie],[language,movie]]
  ) =>
    results.map(([language, trendingMovie]) => {
      const userMovie = getState().UserMovies.userMovies.find(
        (userMovie) =>
          userMovie.id === trendingMovie.id.toString()
        // snippet does not have conditional chaining
      );
      return new Movie( // create new Movie
        trendingMovie.id.toString(),
        language,
        userMovie ? userMovie.location : ''
      );
    })
  )
  .then((movies) => console.log('movies:', movies));

参数化异步函数返回Promise {“ _40”：0，“ _55”：“英语”，“ _65”：1，“ _72”：null，}

1 个答案: