使用React Redux获取数据库数据后，如何更新Expo应用的家具模块？

AI 小北

2026-7-4

问题排查与修复

1. 最直接的错误：map回调未返回组件

你的map回调用了大括号{}但没显式返回FurnitureBox组件，导致循环后没有生成任何可渲染元素。两种修复方式：

方案A：去掉大括号（箭头函数隐式返回）

{isFurnitureLoading ? null : furniture.items.map((obj, index) =>
  <FurnitureBox
    key={index} // 补充key，避免React警告
    name={obj.name}
    price={obj.price}
    imgsrc={require("../assets/img-main-page/computer_table.png")}
    navigation={navigation} 
    navigation_page="Product_page_1"
  />
)}

方案B：添加return语句

{isFurnitureLoading ? null : furniture.items.map((obj, index) => {
  return (
    <FurnitureBox
      key={index} // 补充key，避免React警告
      name={obj.name}
      price={obj.price}
      imgsrc={require("../assets/img-main-page/computer_table.png")}
      navigation={navigation} 
      navigation_page="Product_page_1"
    />
  )
})}

2. 其他需要排查的点

Redux状态更新是否正确：检查fetchFurniture异步action执行完成后，是否把status从loading改成succeeded（或其他非loading状态），同时将接口返回的数组正确赋值给furniture.items。注意reducer必须用不可变方式更新状态，比如：

// 示例slice中的extraReducers配置
extraReducers: (builder) => {
  builder
    .addCase(fetchFurniture.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchFurniture.fulfilled, (state, action) => {
      state.status = 'succeeded';
      state.items = action.payload; // 确保这里正确赋值接口返回的数据
    })
    .addCase(fetchFurniture.rejected, (state) => {
      state.status = 'failed';
    });
}

useSelector路径是否正确：确认state.furniture.furniture确实指向包含status和items的状态对象，避免路径写错导致拿不到正确状态。
useEffect依赖数组：可以尝试把dispatch加入依赖数组（Redux Toolkit中dispatch是稳定引用，不会触发不必要的重渲染）：
```
React.useEffect(() => {
  dispatch(fetchFurniture())
}, [dispatch])
```