React路由切换等待API响应时跨页面数据同步方案咨询

• 开发在线商城项目时，落地页加载阶段即通过API拉取在售商品数据，接口返回结果存储在根组件的useState钩子中，通过props向ShopPage组件传递数据用于商品展示
• 异常场景：用户在落地页触发API请求后、接口响应返回前立即跳转至ShopPage页面时，ShopPage无法正常加载，原因是组件初始化时依赖的接口数据尚未返回
• 现有临时方案：在ShopPage内检测传入props是否为空，为空则重新发起API请求。该方案可实现功能，但会产生冗余请求，存在不必要的性能开销，理想场景下仅需1次接口请求即可覆盖全流程需求
• 目标实现效果：落地页发起API请求后，即使用户提前切换到ShopPage，待接口响应返回后数据可自动同步至ShopPage完成渲染，无需重复发起请求

相关代码 #

App.js #

const [products, setProducts] = useState([])
useEffect(() => {
    fetchProductsCat(categories).then(function(result){
        try {
            console.log(result.data)
            setProducts(result.data)
        } catch {
            console.log(result)
        }
    })        
}, []);

// 路由配置 向Products组件传递props
<Route path='/Shop' exact render={() => (
    <Products setValue={setParentValue} 
              allProducts={products}
              allCategories={categories} />
)}/>

ShopPage（Products组件） #

export const Products = ({ setValue, allProducts, allCategories}) => {

    const [products, setProducts] = useState(allProducts)
    const [categories, setCategories] = useState(allCategories)

    useEffect(() => {
        setCategories(allCategories)
        setProducts(allProducts)
    },[])

父组件的接口请求逻辑本身没有问题：接口返回后调用setProducts更新状态，所有消费该状态的子组件都会接收到最新的props。
异常的核心原因在ShopPage组件的状态同步逻辑：

1. 组件首次挂载时，用传入的空初始props初始化了本地products、categories状态
2. 同步状态的useEffect依赖数组为[]，仅会在组件首次挂载时执行一次，后续父组件props更新时不会触发该逻辑
3. 最终导致接口返回后，父组件传递的最新props无法同步到子组件的本地state中，页面拿不到有效数据无法渲染

方案1：最小改动修复（适配现有代码逻辑） #

只需要修改ShopPage组件内useEffect的依赖数组，监听传入props的变化，props更新时自动同步到本地state即可，同时增加简单的加载态避免空白：

export const Products = ({ setValue, allProducts, allCategories}) => {

    const [products, setProducts] = useState(allProducts)
    const [categories, setCategories] = useState(allCategories)

    useEffect(() => {
        setCategories(allCategories)
        setProducts(allProducts)
    },[allProducts, allCategories]) // 将传入的props加入依赖数组，props变化时自动同步

    // 数据未返回时展示加载提示
    if (!allProducts?.length) {
        return <div>商品数据加载中，请稍候</div>
    }

    // 原有商品渲染逻辑
}

修改后全程仅触发1次接口请求，无论用户在哪个时间点跳转至ShopPage，只要接口返回更新了父组件状态，子组件就会自动接收到最新数据完成渲染，无冗余请求。

方案2：优化代码结构（更推荐） #

当前场景下子组件不需要额外维护一份和父组件完全一致的本地state，重复的状态拷贝本身就是React开发中容易引发状态不同步bug的常见原因，直接使用父组件传入的props即可，代码更简洁：

export const Products = ({ setValue, allProducts, allCategories}) => {
    // 移除冗余的本地state和同步用的useEffect，直接使用props
    if (!allProducts?.length) {
        return <div>商品数据加载中，请稍候</div>
    }

    // 渲染逻辑直接使用allProducts、allCategories
}

该方案完全去掉了多余的状态同步逻辑，父组件数据更新时子组件会自动重渲染，从根源上避免了状态不同步的问题。

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