React/Redux Toolkit/Firebase应用评论CRUD后组件不更新问题求助

问题描述 #

使用React、Redux Toolkit和Firebase开发场地评论应用，用户可对特定场地执行评论的提交、编辑、删除操作，但完成CRUD操作后，组件无法即时显示变更，必须刷新页面才能看到最新状态。怀疑问题出在Firestore数据库结构与前端状态处理逻辑上。

当前Firestore结构：

存在名为venues的集合，单场场地文档结构如下：

{
  name:'',
  photo:'',
  reviews: [
    {
      title:'',
      blurb:'',
      reviewId:''
    },
    {...}
  ]
}

问题根源 #

1. Redux状态未同步更新：初始化时通过fetchVenues将所有场地数据存入Redux状态，但评论CRUD操作仅更新Firestore数据库，未同步修改Redux中的venues状态，组件因状态未变不会重新渲染。
2. 数组匹配风险：使用arrayRemove删除评论时，需要完全匹配对象的所有字段（包括顺序、隐式类型），一旦存在细微差异会导致数据库更新失败，进一步加剧UI不更新问题。

解决方案 #

方案一：不修改Firestore结构，同步更新Redux状态 #

通过在CRUD操作完成后更新Redux状态，触发组件重新渲染：

1. 修改CRUD Thunk，返回最新数据
   以删除评论为例，操作完成后重新获取对应场地的最新数据并返回：

   export const deleteReview = createAsyncThunk("venues/deleteReview", async (review) => {
     const targetReview = {blurb: review.blurb, title: review.title, reviewId: review.reviewId}
     try {
       const venueRef = doc(db,"venues",review.id)
       await updateDoc(venueRef, {
         reviews: arrayRemove(targetReview)
       })
       // 获取更新后的场地数据
       const updatedVenueDoc = await getDoc(venueRef)
       return { id: updatedVenueDoc.id, ...updatedVenueDoc.data() }
     } catch (err) {
       console.log('Error: ', err)
       throw err
     }
   })
   

2. 在Slice中处理更新后的状态
   在venueSlice的extraReducers中添加逻辑，用返回的最新场地数据替换Redux中的对应条目：

   const venueSlice = createSlice({
     name: "venues",
     initialState,
     reducers: {},
     extraReducers(builder) {
       builder
         // ... 原有fetchVenues相关逻辑
         .addCase(deleteReview.fulfilled, (state, action) => {
           const updatedVenue = action.payload
           const venueIndex = state.venues.findIndex(v => v.id === updatedVenue.id)
           if (venueIndex !== -1) {
             state.venues[venueIndex] = updatedVenue
           }
         })
     },
   });
   

   同理，添加、编辑评论的Thunk也需按此逻辑修改，确保操作完成后同步更新Redux状态。

方案二：调整Firestore数据结构（推荐） #

将嵌套在场地文档中的reviews数组改为子集合，符合Firestore的设计规范，同时支持实时监听更新：

1. 调整后的数据库结构
   • venues集合（场地文档）：

     {
       name:'',
       photo:''
     }
     

   • 每个场地文档下创建reviews子集合，单条评论为独立文档（用Firestore自动生成的文档ID作为评论ID）：

     {
       title:'',
       blurb:'',
       createdAt: Timestamp.fromDate(new Date()) // 可选，添加时间戳便于排序
     }
     

2. 前端适配修改
   • 实时监听评论变化：在场地详情组件中，通过onSnapshot监听子集合变化，自动更新UI：

     // 在Venue组件中
     useEffect(() => {
       const reviewsRef = collection(db, 'venues', venueId, 'reviews')
       // 实时监听评论变化
       const unsubscribe = onSnapshot(reviewsRef, (snapshot) => {
         const latestReviews = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))
         // 更新组件本地状态或Redux状态
         dispatch(setVenueReviews(latestReviews))
       })
       // 组件卸载时取消监听
       return () => unsubscribe()
     }, [venueId, dispatch])
     

   • 独立处理评论CRUD：删除评论时直接操作子集合中的文档，无需修改场地主文档：

     export const deleteReview = createAsyncThunk("venues/deleteReview", async ({ venueId, reviewId }) => {
       try {
         const reviewRef = doc(db, 'venues', venueId, 'reviews', reviewId)
         await deleteDoc(reviewRef)
         return { venueId, reviewId } // 用于更新Redux状态（如果需要）
       } catch (err) {
         console.log('Error: ', err)
         throw err
       }
     })
     

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