reactjs - 使用 Next.js 搜索表单

Question

我开始使用 Next.js，但我被阻止了。我正在使用 MovieDB API。我希望在搜索后在另一个页面中显示找到的结果（MovieDB doc：search multi）。不幸的是，我被阻止了，因为我不知道如何传输数据并将其显示在特定页面上。

我已经设法使用以下方法显示其他元素的详细信息：getInitialProps 和 getInitialPath 但我不知道如何。一点线索？^^

表格页面：

import Link from 'next/link';

function SearchForm() {

    const [movies, setMovies] = useState([]); //Displays the table of search results
    const [search, setSearch] = useState(''); //Value in the research input
    const [query, setQuery] = useState('spiderman') //Value to look for when submit

    useEffect(() => {
        searchMovie()
    }, [query])



    const searchMovie = async () =>{
        const request = await fetch (`https://api.themoviedb.org/3/search/multi?api_key=${myKey}&language=fr&query=${query}`)
        const response = await request.json();
        setMovies(response.results);
        console.log(response.results);
    }

    const handleChange = (event) =>{
       setSearch(event.target.value);
       console.log(search);
    }

    const submitSearchMovie = (event) =>{
        event.preventDefault();
        setQuery(search)
    }

    return ( 
        <React.Fragment>
        <form className="form" onSubmit={submitSearchMovie}>
            <input 
                className="searchInput" 
                type="text" 
                placeholder="Rechercher un film, une série, un artiste" 
                value={search}
                onChange={handleChange} 
            />

            <Link href='/search/[id]' as={`/search/${search}`}>
                <a><input type="submit" value="test link" /></a>
            </Link>
        </form>
        {movies.map((movie,index) =>(
            <h4 key={index}>Titre: {movie.title ? movie.title : movie.name}</h4>
        ))}
        </React.Fragment>
    );
}

export default SearchForm;```

标签： reactjsformsnext.js