Javascript 处理页面刷新和向前/向后功能

我使用react和next.js发出API请求（从搜索栏）并在主页上显示电影列表，每个搜索结果都会将我带到另一个页面，该页面将显示与该电影相关的数据。 每次我刷新详细信息页面时，查询结果都会丢失，这是由于发出了错误的api请求，当我使用后退/前进按钮时，搜索结果也会丢失

index.js

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

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 whenSubmit={this.onSearchSubmit}/>

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

//将我带到详细信息页面的代码

Details.js

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

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 whenSubmit={this.onSearchSubmit}/>

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

const Details=（）=>{
const router=useRouter（）；
let[result，setResult]=useState（{}）；
const query=router.query.id；//存储URL中的id
useffect（（）=>{
axios.get（）http://www.omdbapi.com/?',
{params:{
apikey:“”，
一:质疑,，
情节：'满'
}   
}).then（response=>setResult（response.data））
}, []);
返回
}导出默认详细信息；

我还实现了一个搜索栏组件，它在index.js中使用，效果很好。我希望在details.js文件中使用相同的组件来避免代码冗余，但我不知道正确的方法

index.js

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

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 whenSubmit={this.onSearchSubmit}/>

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

SearchBar.js

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

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 whenSubmit={this.onSearchSubmit}/>

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

onFormSubmit=（事件）=>{
event.preventDefault（）；
提交时的this.props.（this.state.term）；
}
render（）{
this.setState（{term:event.target.value}）}/>
}

我可以观察到您的代码，您使用的是query param，它会在每次重新加载时丢失querystring值，或者说是backward和forward。您可以尝试使用路径参数而不是查询参数

电影详细信息页面

parseInt（props.match.params.id）

---

我在useEffect中使用这种方法从服务器获取数据，对我来说效果很好。您也可以尝试。

因为我可以观察到您的代码，您正在使用query param，它将在每次重新加载时丢失querystring值，或者可以说是backward和forward。您可以尝试使用路径参数而不是查询参数

电影详细信息页面

parseInt（props.match.params.id）

---

我使用这种方法从useEffect服务器获取数据，对我来说效果很好。您也可以尝试。

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

注意：通过自动静态优化进行静态优化的页面将在不提供路由参数的情况下水合（查询将为空，即{}）。之后，Next.js将触发对应用程序的更新，以在查询对象中提供路由参数。如果应用程序不能容忍这种行为，可以通过在getInitialProps中捕获查询参数来选择退出静态优化

因此，解决方案是向组件添加

getInitialProps

：

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

export default Details;

或者更改

useffect

仅在

id

可用时获取数据：

  useEffect(() => {
    if (query) {
      axios
        .get("http://www.omdbapi.com/?", {
          params: {
            apikey: "",
            i: query,
            plot: "full"
          }
        })
        .then(response => setResult(response.data));
    }
  }, [query]);

---

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

注意：通过自动静态优化进行静态优化的页面将在不提供路由参数的情况下水合（查询将为空，即{}）。之后，Next.js将触发对应用程序的更新，以在查询对象中提供路由参数。如果应用程序不能容忍这种行为，可以通过在getInitialProps中捕获查询参数来选择退出静态优化

因此，解决方案是向组件添加

getInitialProps

：

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

export default Details;

或者更改

useffect

仅在

id

可用时获取数据：

  useEffect(() => {
    if (query) {
      axios
        .get("http://www.omdbapi.com/?", {
          params: {
            apikey: "",
            i: query,
            plot: "full"
          }
        })
        .then(response => setResult(response.data));
    }
  }, [query]);

---

事实上，对于我的项目，我必须使用next.js，next.js有自己的路由处理方式。哦，这是个问题实际上对于我的项目，我必须使用next.js，next.js有自己的路由处理方式。哦，这是个问题。感谢第二个解决方案奏效，当我回到上一页时，搜索结果消失了，我需要缓存来存储结果吗？@nitishy2j要在客户端导航之间保持状态，请扩展

next/app

（这是一个顶级组件，从未卸载过）并将您的状态放在那里：感谢第二个解决方案的工作，当我返回上一页时，搜索结果将消失，是否需要缓存来存储结果？@nitishy2j要在客户端导航之间保留状态，请扩展

next/app

（这是一个顶级组件，永远不会卸载），然后将您的状态放在那里：