useState가 다른 구성 요소에 있으므로 영화 API 프로젝트에 대한 검색 기능을 트리거할 수 없습니다.

내 문제는 내 App.js 프로젝트에 속하는 두 개의 다른 구성 요소가 있다는 것입니다. 첫 페이지에 영화 목록이 있고 검색 창을 사용하여 다른 영화를 검색할 수 있는 영화 데이터베이스입니다. search.js와 movie.js(API 데이터를 가져오고 표시하는 구성 요소)가 있기 때문에 search.js는 변경해야 할 항목을 정확히 찾아낼 수 없으므로 트리거되지 않습니다. 기본적으로 내 문제는 제출 시 아무 것도 변경되지 않는다는 것입니다.

search.js 코드:

import { useState } from 'react';
import React from 'react';

// search API used to search through database
const searchUrl = "https://api.themoviedb.org/3/search/movie?api_key=d62e1adb9803081c0be5a74ca826bdbd&query="


const Search = ({  }) => {
const [movies, setMovies] = useState([]);
const [search, setSearch] = useState("");


 // Search form that fetches search API and returns results
  const submitForm = (e) => {
    e.preventDefault();
  
  // API used to search for any movie in the database
    fetch(searchUrl + search)
      .then(res => res.json())
      .then(data => {
        setMovies(data.results);
      })
    setSearch("");}
  
  // user search input
  const searchQuery = (e) => {
    setSearch(e.target.value)
  }


    return (
      
    <form onSubmit={submitForm}>
    <i class="fas fa-search"></i>
    <label className="sr-only" htmlFor="searchMovie">Search for a movie</label>
    <input
      className="search"
      type="search"
      placeholder="Search for a movie.."
      value={search}
      onChange={searchQuery}
      />
    </form>

    
    
    
    )
}

export default Search;

그리고 내 영화.js

import { Link } from 'react-router-dom';
import { useState, useEffect } from "react";

const images = "https://image.tmdb.org/t/p/w500/";

// main API used to display trending page
const apiUrl = `https://api.themoviedb.org/3/movie/now_playing?api_key=d62e1adb9803081c0be5a74ca826bdbd&page=`;


const Movie = ( {
}) => {
const [movies, setMovies] = useState([]);


useEffect(() => {
    fetch(apiUrl)
      .then((res) => res.json())
      .then((data)=> {
        setMovies(data.results)
      })
  }, []);


    return (
    <section className="movieslist">
      {movies.length > 0 ? movies.map((movie) => {
        return (
        <Link to={`/movie/${movie.id}`}>
        <div className="moviePoster">
            <img src={movie.poster_path ? `${images}${movie.poster_path}` : "https://www.movienewz.com/img/films/poster-holder.jpg"} alt={movie.title} />
            <div className="movieInfo">
                <h2>{movie.title}</h2>
                <p className="voteStyle">Rating: {movie.voteAverage}</p>
                <p className="release">Release Date: {movie.release}</p>
                <p className="summary">{movie.overview}</p>
                <p className="key">{movie.id}</p>
            </div>

        </div>
        </Link>
          
        );
      }): <p class="noResults">No results found. Please try again?</p>}
        </section>


    )
}


export default Movie;