React多组件并发更新Context状态异常问题求助

问题核心 #

你遇到的问题是状态更新的闭包陷阱：loadFavoriteItemForProduct函数在AccountProvider初始化时创建，捕获了初始的空数组favorites。当多个ProductCard异步调用该函数时，每个函数内的favorites始终是初始空数组，导致每次更新都基于空数组添加数据，最终仅保留最后一次请求的结果。

解决方案1：使用函数式状态更新（最直接修复） #

React的setState支持传入函数，该函数会接收当前最新的状态值作为参数，确保每次更新都基于最新状态修改，避免闭包陷阱。

修改AccountProvider.tsx中的loadFavoriteItemForProduct方法：

const AccountProvider = ({children}: Props)=> {
   const [favorites, setFavorites] = useState([]) 
   
   const loadFavoriteItemForProduct = async (productId: string)=>{
      const favoriteItem = await apiManager.getFavoriteItem(productId)
      // 使用函数式更新，基于最新状态追加数据
      setFavorites(prevFavorites => [...prevFavorites, favoriteItem])
   }

   const account: Account = {
       loadFavoriteItemForProduct
   }

 return (
    <AccountContext.Provider value={account}>
      {children}
    </AccountContext.Provider>
  );
}

解决方案2：批量加载优化（推荐） #

如果后端支持批量接口，建议一次性获取所有商品的收藏状态，减少异步请求数量，同时避免竞态问题：

1. 在AccountProvider中暴露批量更新方法：

const AccountProvider = ({children}: Props)=> {
   const [favorites, setFavorites] = useState([]) 
   
   // 批量设置收藏数据
   const setAllFavorites = (items: FavoriteItem[]) => {
       setFavorites(items)
   }

   const account: Account = {
       setAllFavorites
   }

 return (
    <AccountContext.Provider value={account}>
      {children}
    </AccountContext.Provider>
  );
}

2. 在Products.tsx中批量请求并更新：

const Products = () => {
     const explore = useContext(ExploreContext)
     const { setAllFavorites } = useContext(AccountContext)
     
     useEffect(()=>{
        const loadAllFavorites = async () => {
            // 假设后端提供批量查询接口，传入所有商品ID
            const productIds = explore.products.map(p => p.productId)
            const favoriteItems = await apiManager.getFavoriteItems(productIds)
            setAllFavorites(favoriteItems)
        }
        loadAllFavorites()
     }, [explore.products, setAllFavorites])

     return (
        <div>
           {explore.products.map(product => <ProductCard product={product} />)} 
       </div>
     )
}

额外优化：避免重复添加 #

如果担心同一商品的收藏数据被重复添加，可以在更新时增加去重逻辑：

setFavorites(prevFavorites => {
    // 检查当前商品是否已在收藏列表中
    const isExist = prevFavorites.some(item => item.productId === favoriteItem.productId)
    return isExist ? prevFavorites : [...prevFavorites, favoriteItem]
})

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