尝试在 React-Native 中使用 Hook 从 Api 渲染数据

Question

I'm new here and in react-native.

I want render some data from IMDB Api with the "hook" method. So I try to render data in a flatlist, I can see in the console that the data is retrieved properly in a jSon format witch is a good thing but when I open my app I don't see any rendering on the screen.

I try to use the 'Hook' method and not the 'classes' and I'm pretty sure that I don't use properly the useState method. So any help or advices are welcome.

My code:

App

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Button,
  TextInput,
  FlatList,
} from "react-native";
// import films from "../Helpers/filmsData";
import FilmsItem from "./FilmsItem";
import getFilmsFromApiWithSearchedText from "../Api/TMDBApi";

const Search = () => {
  const [films, setFilms] = useState([]);

  const _loadFilms = () => {
    getFilmsFromApiWithSearchedText("White").then(
      (data) => setFilms({ film: data.results }),
      console.log(films)
    );
  };

  return (
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Titre du film" />
      <Button
        style={styles.button}
        title="Rechercher"
        onPress={() => _loadFilms()}
      />
      <FlatList
        data={setFilms.films}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <FilmsItem films={item} />}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 20,
  },
  input: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    paddingLeft: 5,
    borderWidth: 1,
    borderColor: "#000000",
  },
});

export default Search;

Api request:

// Api/TMDBApi.js

const API_TOKEN = "**************************";

const getFilmsFromApiWithSearchedText = (text) => {
  const url =
    "https://api.themoviedb.org/3/search/movie?api_key=" +
    API_TOKEN +
    "&language=en&query=" +
    text;
  return fetch(url)
    .then((response) => response.json())
    .catch((error) => console.error(error));
};

export default getFilmsFromApiWithSearchedText;

FilmItem:

import React from "react";
import { View, Text, StyleSheet, Image } from "react-native";

const FilmsItem = (props) => {
  const film = props.film;
  return (
    <View style={styles.container}>
      <Image style={styles.img} source={{ uri: "image" }} />
      <View style={styles.content}>
        <View style={styles.header}>
          <Text style={styles.title}>{film.title}</Text>
          <Text style={styles.vote}>{film.vote_average}</Text>
        </View>
        <View style={styles.synopsis}>
          <Text style={styles.synopsysText} numberOfLines={6}>
            {film.overview}
          </Text>
        </View>
        <View style={styles.date}>
          <Text style={styles.dateText}>Sorti le {film.release_date}</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    height: 190,
  },
  content: {
    flex: 1,
    margin: 5,
  },
  img: {
    height: 180,
    width: 120,
    margin: 5,
    backgroundColor: "gray",
  },
  header: {
    flex: 3,
    flexDirection: "row",
  },
  title: {
    flex: 1,
    flexWrap: "wrap",
    fontWeight: "bold",
    fontSize: 20,
    paddingRight: 5,
  },
  vote: {
    fontWeight: "bold",
    fontSize: 20,
    color: "#666666",
  },
  synopsis: {
    flex: 7,
  },
  synopsysText: {
    fontStyle: "italic",
    color: "#666666",
  },
  date: {
    flex: 1,
    paddingBottom: 10,
  },
  dateText: {
    textAlign: "right",
    fontSize: 14,
  },
});

export default FilmsItem;

Answer 1

const _loadFilms = () => {
    getFilmsFromApiWithSearchedText("White").then(
      (data) => setFilms({ film: data.results }),
      console.log(films)
    );
  };

setFilms({ film: data.results }) will set an object, but you need an array in there.

Try to do something like this: setFilms(data.results)

Answer 2

use useState in this way

const _loadFilms = () => {
    getFilmsFromApiWithSearchedText("White").then(
      (data) => setFilms(data.results),
      console.log(films)
    );
  };

then in Flatlist you can use like this

return (
    <View style={styles.container}>
      <TextInput style={styles.input} placeholder="Titre du film" />
      <Button
        style={styles.button}
        title="Rechercher"
        onPress={() => _loadFilms()}
      />
      <FlatList
        data={films}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <FilmsItem films={item} />}
      />
    </View>
  );