分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了useEffect 中的 setState 循环应用程序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决useEffect 中的 setState 循环应用程序？

开发过程中遇到useEffect 中的 setState 循环应用程序的问题如何解决？下面主要结合日常开发的经验，给出你关于useEffect 中的 setState 循环应用程序的解决方法建议，希望对你解决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;