如何解决如何停止useEffect每次都重新加载我的页面?
由于某种原因,从数据库获取状态后,每次更新页面时都会重新加载整个页面。页面闪烁,我结束于页面顶部。为什么会这样?
我在sort()之类的其他函数中更新了整个状态,而无需重新加载即可完美运行。我在每个点击处理程序中都放置了event.preventDefault(),所以这不应该成为问题。
使用React的一大好处是无需重新加载即可拥有一个平滑的UI,这很烦人。
function App() {
const [contacts,setContacts] = useState({ items: [] });
useEffect(() => {
axios
.get('http://localhost:5000/')
.then((result) => {
setContacts({ items: result.data });
})
.catch((err) => console.log(err));
},[]);
这就是被调用的函数:
const handleSubmit = (event) => {
event.preventDefault();
if (!id) {
axios
.post('http://localhost:5000/add/',input)
.then(() => {
setInput(emptyState);
})
.catch((err) => console.log(err));
} else {
axios
.post(`http://localhost:5000/update/${id}`,input)
.then(() => {
props.updateContact(input);
setInput(emptyState);
})
.catch((err) => console.log(err));
}
window.location = '/';
};
解决方法
您需要在[]中放入一些内容。 您可以看到我们在第二个参数中将props.name传递给了数组。现在,当名称更改时,这将导致效果始终再次运行。 如果您不通过任何内容,它将始终更新并且将毫无用处。
useEffect(() => {
document.title = `Page of ${props.name}`
},[props.name])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。