我使用react和next.js进行API请求(从搜索栏(，并在主页上显示电影列表，每个搜索结果都会将我带到不同的页面，该页面将显示与该电影相关的数据。每次当我刷新详细信息页面时，查询结果都会丢失，因为我发出了错误的api请求，当我使用向后/向前按钮时，搜索结果也会丢失。
index.js
<Link href={`/Details?id=${movie.imdbID}`}> //code to take me to the Details page
详细信息.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>}
如果你阅读文档，你会发现：
注意：通过自动静态优化静态优化的页面将在不提供路由参数的情况下进行水合(查询将为空，即｛｝(。水合后，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]);
根据我观察到的代码，您使用的查询参数在每次重新加载时都会丢失查询字符串值，或者可以说是向后和向前。您可以尝试path_param而不是query_param。
-
<Route path="/Details/:id" component={MovieDetailsComponent} exact></Route> -
<Link to={/电影/$｛id｝}> -
电影详情页
parseInt(props.match.params.id);
我在useEffect中使用这种方法从服务器获取数据，对我来说效果很好，你也可以尝试。