React中如何在创建新post时触发useEffect且避免无限循环

问题核心是你不需要监听post状态来触发刷新——因为每次拉取数据更新post都会触发依赖项变化，导致无限循环。正确的做法是在用户创建新post的动作完成后，主动触发数据刷新，以下是几种可行方案：

方案1：创建post后直接调用刷新函数 #

如果创建新post的逻辑和Home组件在同一处（比如组件内有发布表单），在提交post成功后直接调用getPosts即可：

export default withAuth(function Home() {
    const [post, setPost] = useState([])

    const getPosts = async () => {
        const data = await instance.get('/post')
        setPost(data.data)
    }

    // 处理创建post的函数
    const handlePublishPost = async (newPostContent) => {
        // 提交新post到后端
        await instance.post('/post', { content: newPostContent });
        // 创建成功后立即拉取最新数据
        getPosts();
    }

    useEffect(() => {
        // 初始化加载数据
        getPosts()
    }, [])

    return (
        <>
            <Navbar currentPage="home" user={getUser()} />
            {/* 假设有发布按钮/表单，调用handlePublishPost */}
            <button onClick={() => handlePublishPost('新内容')}>发布帖子</button>
            <div className={styles.home}>
                <div className={styles.content}>
                    {post.map((item, index) => (
                        <PostCard key={index} {...item} />
                    ))}
                </div>
            </div>
        </>
    )
})

方案2：用触发信号跨组件刷新 #

如果创建post的逻辑在其他组件（比如弹窗、单独的发布页面），可以通过一个刷新触发状态来控制：

步骤1：在Home组件中添加触发状态 #

export default withAuth(function Home() {
    const [post, setPost] = useState([])
    // 用于触发刷新的状态，每次切换值就会触发useEffect
    const [refreshPosts, setRefreshPosts] = useState(false)

    // 用useCallback包裹，避免每次渲染重新创建函数
    const getPosts = useCallback(async () => {
        const data = await instance.get('/post')
        setPost(data.data)
    }, [])

    useEffect(() => {
        getPosts()
    }, [refreshPosts, getPosts]) // 依赖refreshPosts，而不是post

    // 把触发刷新的方法传递给子组件/其他组件
    const triggerRefresh = () => {
        setRefreshPosts(prev => !prev)
    }

    return (
        <>
            {/* 假设发布组件是子组件，传递triggerRefresh */}
            <PostPublishModal onPublishSuccess={triggerRefresh} />
            <Navbar currentPage="home" user={getUser()} />
            <div className={styles.home}>
                <div className={styles.content}>
                    {post.map((item, index) => (
                        <PostCard key={index} {...item} />
                    ))}
                </div>
            </div>
        </>
    )
})

步骤2：在创建post的组件中调用触发方法 #

function PostPublishModal({ onPublishSuccess }) {
    const handleSubmit = async () => {
        await instance.post('/post', { /* post数据 */ });
        // 创建成功后调用父组件的刷新方法
        onPublishSuccess();
    }

    return <button onClick={handleSubmit}>发布</button>
}

为什么不能把post作为依赖？ #

每次调用getPosts都会通过setPost(data.data)更新post状态，而data.data是新的数组引用，会导致useEffect的依赖项变化，进而再次调用getPosts，形成无限循环。我们需要的是事件驱动的刷新，而不是状态变化的循环触发。

内容的提问来源于stack exchange，提问作者Unnikrishnan KJ