Форма поиска с Next. js - PullRequest
Новая
       5

Форма поиска с Next. js

0 голосов
/ 14 апреля 2020

Я начинаю использовать Next. js, и я заблокирован. Я использую MovieDB API. I sh после выполнения поиска для отображения на другой странице найденного результата (MovieDB do c: поиск мульти). К сожалению, я заблокирован, потому что я не знаю, как передать данные и отобразить их на указанной странице c.

Мне уже удалось отобразить сведения о другом элементе, используя методы: getInitinialProps и 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;```
...