обновление страницы и функция перемотки вперед / назад - PullRequest
Новая
       7

обновление страницы и функция перемотки вперед / назад

0 голосов
/ 07 ноября 2019

Я использую реагировать и next.js для выполнения запроса API (из панели поиска) и отображения списка фильмов на домашней странице, и каждый результат поиска приведет меня на другую страницу, где будут отображаться данные, связанные с этим фильмом. Каждый раз, когда я обновляю страницу сведений, результат запроса теряется, из-за чего делается неправильный запрос API и результаты поиска также теряются при использовании кнопки «назад / вперед».

index.js 

  <Link href={`/Details?id=${movie.imdbID}`}>  //code to take me to the Details page

Details.js 

const Details =()=>{    
const router = useRouter();
let [result,setResult]=useState({});
const query=router.query.id;  //storing the id from the URL

useEffect(() => {
axios.get('http://www.omdbapi.com/?',
            {params:{
                apikey:'',
                i:query,
                plot:'full'
                }   
            }).then(response=> setResult(response.data))
         }, []);
    return <SearchBar />    
 } export default Details;

также я реализовал компонент Searchbar, который использовал его в index.js, который работает отлично. используйте тот же компонент в файле details.js, чтобы избежать избыточности кода, но я не знаю правильный подход.

index.js 

      <SearchBar whenSubmit={this.onSearchSubmit}/>

SearchBar.js 

    onFormSubmit=(event)=>{
    event.preventDefault();
    this.props.whenSubmit(this.state.term);
    }

    render(){
    <form className="ui form" onSubmit={this.onFormSubmit}>
           <input type="text" value={this.state.term} placeholder="search any movie" 
            onChange={event=>this.setState({term: event.target.value})} />
      </form>}

Ответы [ 2 ]

1 голос
/ 07 ноября 2019

Если вы прочитаете документы, вы обнаружите, что:

Примечание. Страницы, которые статически оптимизированы с помощью автоматической статической оптимизации, будут гидратированы без указания параметров маршрута (запрос будет пустым, т.е. {}). После увлажнения Next.js запустит обновление вашего приложения, чтобы предоставить параметры маршрута в объекте запроса. Если ваше приложение не может допустить такого поведения, вы можете отказаться от статической оптимизации, захватив параметр запроса в getInitialProps.

Итак, решение состоит в том, чтобы добавить getInitialProps к вашему компоненту: 

Details.getInitialProps = async () => ({});

export default Details;

Или измените useEffect для получения данных только при наличии id: 

  useEffect(() => {
    if (query) {
      axios
        .get("http://www.omdbapi.com/?", {
          params: {
            apikey: "",
            i: query,
            plot: "full"
          }
        })
        .then(response => setResult(response.data));
    }
  }, [query]);
0 голосов
/ 07 ноября 2019

Поскольку я могу наблюдать за вашим кодом, вы используете параметр запроса, который будет терять значение строки запроса при каждой перезагрузке или может говорить вперед и назад. Вы можете попробовать path_param вместо query_param.

  1. <Route path="/Details/:id" component={MovieDetailsComponent} exact></Route>

  2. <Link to={ / фильмы / $ {id} }>

  3. страница с подробностями о фильмах parseInt(props.match.params.id);

Я использовал этот подход для извлечения данных с сервера в использовании. Эффект, и он работает нормально, вы можете попробовать и я.

...