我的问题是，我的 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;

和我的 movie.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;