React-TypeScript API搜索功能不工作

Question

我们试图在我们的类项目中添加一个搜索功能，但是没有得到任何结果。如果我们输入输入，然后返回到代码并保存它，那么它就会工作。但是onSubmit没有工作。

这是Search组件

import React, { useEffect, useState } from 'react'
import SearchMovieResults from '../models/Search';
import GetMovies from '../services/GetMovie';
function Search() {
const [search, setSearch] = useState<string>("");
const [title, setTitle] = useState<string>("");
const [movie, setMovie] = useState<SearchMovieResults[]>([])
useEffect(() => {
GetMovies(title).then(data => {
setMovie(data);
});
}, []);
return (
<div>
<form onSubmit={(e) => {
e.preventDefault();
setTitle(search);
console.log(title);
}}>
<label htmlFor="search">SEARCH:</label>
<input type="text" name="" id="search" placeholder="Type movie/tv show here" onChange={(e) => {setSearch(e.target.value)}}/>
<button type="submit">SEARCH</button>
</form>
{movie.map((title, index) =>
<p key={index}>{title.title}</p>
)}
</div>
)
}
export default Search;

这是我们使用的API。

import axios from "axios";
import Movie from "../models/MovieInterface";
import SearchMovieResults, { SearchMovie } from "../models/Search";
export default function GetMovies(search: string) : Promise<SearchMovieResults[]> {
return axios
.get<SearchMovie>(`https://api.themoviedb.org/3/search/movie?api_key={api-key}&query=${search}`)
.then((response) => {return response.data.results})
}

这是界面

export interface SearchMovie{
results: SearchMovieResults[]
}
export default interface SearchMovieResults{
genres_ids : number[],
backdrop_path : string | null,
title : string,
overview : string,
vote_average : number,
poster_path : string,
release_date : string,
runtime : number
}

任何输入将非常感激，谢谢!

Answer 1

如果您想在每次提交表单时查找电影，那么将title添加到您的依赖数组:

useEffect(() => {
GetMovies(title).then(data => {
setMovie(data);
});
}, [title]);

则useEffect将在每次标题更改时执行，每当提交表单时都会执行