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

Question

我正在使用react和Next.js进行API请求（从搜索栏），并在主页上显示电影列表，每个搜索结果都将带我到一个不同的页面，该页面将显示与该电影相关的数据。每次刷新details页面时，由于api请求错误导致查询结果丢失，使用Backwards/Forward按钮也会丢失搜索结果。

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>}

Answer 1

如果你阅读这些文件，你会发现：

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