处理页面刷新和 forward/backward 功能

Question

我正在使用 React 和 next.js 发出 API 请求（来自搜索栏）并在主页上显示电影列表，每个搜索结果都会将我带到不同的页面，这将显示与该电影相关的数据。每次我刷新详细信息页面时，由于发出了错误的 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 中使用它可以工作 fine.i 希望在 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。

<Route path="/Details/:id" component={MovieDetailsComponent} exact></Route>
<Link to={/电影/${id}}>
电影详情页面parseInt(props.match.params.id);

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

Answer 2

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

Note: Pages that are statically optimized by automatic static optimization will be hydrated without their route parameters provided (query will be empty, i.e. {}). After hydration, Next.js will trigger an update to your application to provide the route parameters in the query object. If your application cannot tolerate this behavior, you can opt-out of static optimization by capturing the query parameter in 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]);

处理页面刷新和 forward/backward 功能

handling page refresh and forward/backward function

javascript

reactjs

next.js

react-hooks