useEffect 中的 setState 循环应用程序答案

【问题标题】：setState in useEffect loops the applicationuseEffect 中的 setState 循环应用程序
【发布时间】：2021-04-27 21:16:53
【问题描述】：

为什么会出现无限循环错误？ 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;

【问题讨论】：

不是直接的答案，但根据你所拥有的，我不确定你是否需要 useState 和 useEffect 钩子的所有复杂性。看起来好像blog 永远不会改变，而takeBlog 只被调用一次。难道这不能只是：const query = useQuery();const _data = await (await fetch(${root}/api/blog/${query})).json();const blog = _.get(_data, 'blog', {}); 然后完全删除 useState 和 useEffect 钩子。编辑：为糟糕的评论格式道歉。
@Tom，很可能组件会变大并且包含状态变量，所以无论如何，我将不得不回到这个实现。此外，官方文档说在请求的情况下要这样做。

标签： javascript reactjs lodash

【解决方案1】：

给你一个解决方案

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 中的博客状态变量作为条件

【讨论】：