更准确地说,它并不总是发生,假设在70%的情况下它工作正常,但有时应用程序冻结
我有一个调用API的按钮,在收到数据后,我想刷新页面,而不丢失状态,这就是为什么我使用router.push()去同一个页面。就像我说的,它工作正常的大部分时间,所以我认为这不是一个代码问题,这里有一个简单的例子:'
<Button
onClick={async() => {
await axios
.patch(`http://127.0.0.1:5000/track/update/${trackId}`, updateTrackDto)
.then((res) => {
handleCloseDialogSure();
router.push(`/tracks`); // this is the path of the same page
})
.catch((error) => {
console.log("addTrack catched an error : ", error);
});
}
>
Update
</Button>
我还使用getServerSideProps()
export async function getServerSideProps(context) {
console.log("getStaticProps Track Details starts");
const trackId = context.params.trackId;
const track = await axios.get(`http://127.0.0.1:5000/track/get/${trackId}`);
return {
props: {
track: track.data,
},
};
}
最后我使用下一个路由器
import { useRouter } from "next/router";
const router = useRouter();
'
2条答案
按热度按时间5lhxktic1#
当您使用router.push()导航到同一页面时,您的Next.js应用可能会因为无限循环或循环引用而冻结。如果您尝试导航到的页面正在重新呈现自身或在其呈现过程中再次调用router.push(),则可能会发生这种情况。
要解决此问题,请尝试以下步骤:
检查代码中在页面呈现周期内调用router.push()或router.replace()的位置。这可能位于页面呈现的组件中,也可能位于作为页面呈现过程的一部分调用的效果挂钩(如useEffect)中。
查找可能导致页无限期重新呈现自身的任何循环引用或依赖项。例如,如果页正在呈现依赖于该页正在设置的属性的组件,则这可能会创建循环引用并导致页冻结。
0yg35tkg2#
此问题是由材质ui中的
<TexFiels/>
组件引起的,尤其是multiline
属性,该属性会阻止多次渲染你可以在Yugandhar评论中找到这个here!的解决方案