处理页面刷新和前进/后退功能

Question

我正在使用 react 和 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;

我还在 index.js 中实现了一个 Searchbar 组件，它工作正常。我希望在 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>}

Answer 1

我可以观察到您的代码，您正在使用查询参数，这将在每次重新加载时丢失您的查询字符串值，或者可以说向后和向前。您可以尝试使用 path_param 而不是 query_param。

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

2. <Link to={/movies/${id}}>

3. 电影详情页面parseInt(props.match.params.id);

我使用这种方法在 useEffect 中从服务器获取数据，它对我来说工作正常，你也可以尝试。

Answer 2

如果您阅读文档，您会发现：

注意：通过自动静态优化进行静态优化的页面将在不提供路由参数的情况下进行水合（查询将为空，即 {}）。水化后，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]);