React函数组件同渲染周期内状态逻辑使用问题

React函数组件中，useState的状态更新是异步且批量处理的。在同一个渲染周期内调用clearPosts后，isLoading和endReached的状态并不会立刻更新，所以紧接着调用的getPosts读取到的还是更新前的旧值（此时endReached仍为true），导致触发“aborting get”的逻辑。

方案一：使用useRef同步追踪最新状态 #

useRef的current属性是同步更新的，可以用来保存最新的状态值，让getPosts直接读取最新状态：

const BrowsePosts = (props) => {
    const [posts, setPosts] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [endReached, setEndReached] = useState(false);
    const [query, setQuery] = useState('');
    
    // 用ref同步追踪最新状态
    const isLoadingRef = useRef(isLoading);
    const endReachedRef = useRef(endReached);

    // 同步ref与状态
    useEffect(() => {
        isLoadingRef.current = isLoading;
        endReachedRef.current = endReached;
    }, [isLoading, endReached]);

    useEffect(() => {
        clearPosts();
        getPosts();
    }, [query]);

    const clearPosts = () => {
        console.log("clearing posts");
        setPosts([]);
        setIsLoading(false);
        setEndReached(false);
    }

    const getPosts = async () => {
        // 读取ref的最新值
        if (isLoadingRef.current || endReachedRef.current) {
            console.log("aborting get");
            return;
        }

        console.log("getting posts");
        setIsLoading(true);
        try {
            // 模拟接口请求
            const response = await fetch(`/api/posts?query=${query}`);
            const newPosts = await response.json();
            
            setPosts(prev => [...prev, ...newPosts]);
            if (newPosts.length === 0) {
                setEndReached(true);
            }
        } catch (err) {
            console.error(err);
        } finally {
            setIsLoading(false);
        }
    }

    // 其他组件逻辑...
}

方案二：通过useEffect监听状态变化触发请求 #

利用useEffect的依赖特性，当query变化后先重置状态，再监听重置后的isLoading和endReached状态，自动触发getPosts：

const BrowsePosts = (props) => {
    const [posts, setPosts] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [endReached, setEndReached] = useState(false);
    const [query, setQuery] = useState('');

    // query变化时重置状态
    useEffect(() => {
        clearPosts();
    }, [query]);

    // 状态重置后触发请求
    useEffect(() => {
        if (!isLoading && !endReached && query) { // 可根据需求加query非空判断
            getPosts();
        }
    }, [query, isLoading, endReached]);

    const clearPosts = () => {
        console.log("clearing posts");
        setPosts([]);
        setIsLoading(false);
        setEndReached(false);
    }

    const getPosts = async () => {
        if (isLoading || endReached) {
            console.log("aborting get");
            return;
        }

        console.log("getting posts");
        setIsLoading(true);
        try {
            const response = await fetch(`/api/posts?query=${query}`);
            const newPosts = await response.json();
            
            setPosts(prev => [...prev, ...newPosts]);
            if (newPosts.length === 0) {
                setEndReached(true);
            }
        } catch (err) {
            console.error(err);
        } finally {
            setIsLoading(false);
        }
    }

    // 其他组件逻辑...
}

方案三：将状态作为参数传递（临时方案） #

如果只是单次调用的场景，可以在clearPosts后，手动传递最新的状态值给getPosts，避免读取旧的闭包值：

useEffect(() => {
    clearPosts();
    // 直接传递重置后的状态值
    getPosts(false, false);
}, [query]);

const getPosts = async (currentIsLoading, currentEndReached) => {
    if (currentIsLoading || currentEndReached) {
        console.log("aborting get");
        return;
    }

    console.log("getting posts");
    // 后续逻辑不变...
}

这种方案适合简单场景，但如果getPosts在其他地方也会被调用，需要确保每次都传递正确的状态值，维护成本较高。

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