javascript - useEffect 中的 setState 循环应用程序
问题描述
为什么会出现无限循环错误?React 指的是标有 的行*
:
function Blog() {
const [blog, setBlog] = useState({});
const query = useQuery();
async function takeBlog(query) {
const _data = await (await fetch(`${root}/api/blog/${query}`)).json();
console.log(_data.blog)
setBlog(_.get(_data, 'blog', {})); // *
}
useEffect(() => {
takeBlog(query);
}, []);
return (
<div className="blog_page">
<div className="container">
<div className="top">
</div>
<div className="other ab">
<div className="left">
<Navbar active='blogs' />
</div>
<div className="right">
<Posts posts={_.get(blog, 'articles', [])} />
</div>
</div>
</div>
</div>
);
}
export default Blog;
解决方案
给你一个解决方案
function Blog() {
const [blog, setBlog] = useState({});
const query = useQuery();
async function takeBlog(query) {
const _data = await (await fetch(`${root}/api/blog/${query}`)).json();
console.log(_data.blog)
setBlog(_.get(_data, 'blog', {})); // *
}
useEffect(() => {
const keys = Object.keys(blog);
if (!keys.length) {
takeBlog(query);
}
}, []);
return (
<div className="blog_page">
<div className="container">
<div className="top">
</div>
<div className="other ab">
<div className="left">
<Navbar active='blogs' />
</div>
<div className="right">
<Posts posts={_.get(blog, 'articles', [])} />
</div>
</div>
</div>
</div>
);
}
export default Blog;
检查 useEffect 中的博客状态变量作为条件
推荐阅读
- c++ - 在文本文件中查找字符串并在 C++ 中显示整行
- r - 在 R 中使用 blsAPI 获取 2020 年失业人数?[包括代码和图像]
- automation - Webhook 的 JMeter 性能测试
- android - 我如何实现这种类型的圆底bavigationbiew?
- sql-server - 我如何将 mssql 链接到 android 工作室?
- php - 正则表达式字符含义
- javascript - 模拟文本输入更改,就好像用户键入了特定键以触发 React 的 onChange 处理程序?
- html - 结合使用 BeautifulSoup 的 iframe 内部和外部的 html 解析
- python - Python中未使用的变量
- c++ - fstream 读写函数错误