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

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

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

Answer 2

因为我可以观察到您的代码，所以您使用的是查询参数，每次重新加载时都会丢失您的querystring值，或者可以说向前和向后。您可以尝试使用path_param而不是query_param。

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

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

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

2 个答案: