React/Redux Toolkit/Firebase项目API调用返回重复结果排查

问题描述 #

使用React、Redux Toolkit和Firebase开发场地点评应用时，从Firestore的venues集合拉取数据后，渲染出两组完全相同的场地列表（预期显示3个场地，实际显示6个）。

问题原因分析 #

1. Redux状态更新逻辑错误
   在venueSlice的fetchVenues.fulfilled处理函数中，使用state.venues.push(...action.payload)将新拉取的数据追加到现有数组中，而非直接替换。如果数据请求被多次触发，每次都会把相同数据追加到状态里，最终导致重复。

2. 数据请求可能被多次触发
   虽然useEffect依赖了dispatch，但如果组件被重复挂载（比如路由配置重复、父组件多次渲染导致子组件重新挂载），或者dispatch引用意外变化，会多次调用fetchVenues，每次都追加数据。

3. 列表key值使用不当
   渲染列表时使用venue.name作为key，若存在同名场地，React无法准确识别列表项的唯一性，可能加剧渲染异常（虽不是本次重复的主因，但属于潜在问题）。

解决方案 #

1. 修正Redux状态更新逻辑 #

将fetchVenues.fulfilled中的追加操作改为直接替换数组，确保每次拉取数据都覆盖旧状态：

// VenueSlice.js 中 extraReducers 部分修改
extraReducers(builder) {
    builder
        .addCase(fetchVenues.fulfilled, (state,action) => {
            state.venues = action.payload // 直接替换数组，而非追加
        })
}

2. 确保数据请求仅触发一次 #

调整useEffect的依赖数组为[]，保证仅在组件挂载时执行一次数据拉取：

// VenueList.js 中 useEffect 修改
useEffect(() => {
    dispatch(fetchVenues())
}, []) // 空依赖数组，仅挂载时执行一次

同时检查组件是否被重复引入或挂载，避免不必要的重复渲染。

3. 修正列表key值 #

使用Firestore文档的唯一id作为列表项的key，确保React能正确识别每个列表项：

// VenueList.js 中渲染部分修改
<h2 key={venue.id}>{venue.name}</h2>

额外修复：ADD_REVIEW reducer错误 #

当前ADD_REVIEW reducer中直接对state执行push操作，而初始状态是{ venues: [] }，正确的写法应该是对state.venues执行push：

// VenueSlice.js 中 reducers 部分修改
reducers: {
    ADD_REVIEW: (state,action) => {
        state.venues.push(action.payload) // 修正为操作venues数组
    }
}

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