useEffect 中的 setState 循環應用程序

Question

為什么會出現無限循環錯誤？ 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;

Answer 1

給你go一個解決辦法

 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;

檢查博客 state 變量在 useEffect 作為條件