xgqfrms/movie

A React Movie Search Web App

movie

A React Movie Search Web App

docs

https://app.grammarly.com/ddocs/952896189

# npx, npm 5.2+
$ npx create-react-app movie-search-web-app

# npm, npm 6+
$ npm init react-app movie-search-web-app

# yarn, yarn 0.25+
$ yarn create react-app movie-search-web-app

$ node -v
# v12.18.0

$ npm -v
# 6.14.4

$ yarn -v
# 1.22.4

React Movie Search Web App

$ yarn start

$ yarn test

$ yarn build

$ yarn eject

$ open http://localhost:3000

docs

https://reactjs.org

https://facebook.github.io/create-react-app/docs/

movie's Issues

API 超时处理方法

API 超时处理方法

import React, {useState} from "react";

import MovieCard from "./MovieCard";
import CardList from "./CardList";
import SearchForm from "./SearchForm";
// css
import "./index.css";

// options
const apiV3 = `https://api.themoviedb.org/3/search/movie`;
const apiKey = `5dcf7f28a88be0edc01bbbde06f024ab`;
const lang = `en-US`;
const page = 1;
const adult = false;

const SearchMovie = () => {
  // string value
  const [query, setQuery] = useState('Jurassic Park');
  // const [query, setQuery] = useState('');
  // array value
  const [movies, setMovies] = useState([]);
  // custom form submit event handler
  const search = async (e) => {
    // stop refresh page
    e.preventDefault();
    try {
      const url = `${apiV3}?api_key=${apiKey}&language=${lang}&query=${query}&page=${page}&include_adult=${adult}`;
      // API 超时处理方法 ❓
      setTimeout(() => {
        const results = [{
          title: "movie.title",
          poster_path: "movie.poster_path",
          release_date: "movie.release_date",
          vote_average: "movie.vote_average",
          overview: "movie.overview",
        }];
        setMovies(results);
      }, 3000);
      const res = await fetch(url);
      const data = await res.json();
      setMovies(data.results);
    } catch (err) {
      // report error, Sentry
      // ErrorBoundary
      console.error(err);
    }
  };
  return (
    <>
      <SearchForm
        datas={{
          query,
        }}
        methods={{
          setQuery,
          search,
        }}
      />
      <CardList movies={movies} />
    </>
  );
}

export default SearchMovie;

https://scrimba.com/