React Context中从Firestore获取的对象在组件中使用时为undefined的问题

问题核心原因 #

1. React状态更新的异步特性 #

你在useEffect中调用异步函数getCategoriesMap后，立刻执行setFilteredProducts(products['all'])——但React的setState是异步操作，此时products还是初始的空数组[]，products['all']自然是undefined，导致filteredProducts初始值错误。而且即使setProducts执行完成，当前useEffect的闭包中也无法获取到更新后的products值。

2. 初始状态与后续状态类型不匹配 #

products的初始状态是数组[]，但后续通过setProducts设置的是包含all属性的对象{ all, ...categoryMap }。这意味着组件初始渲染时，products是数组，没有all属性，products.all为undefined，直到Firestore请求完成后才会变成预期的对象结构。

3. 派生状态处理不当 #

你试图将products.all存为filteredProducts状态，但这属于派生状态（由其他状态计算而来），直接在初始化时设置会因为异步问题导致错误，更合理的方式是直接从products中派生，而非单独存为状态。

解决方案 #

步骤1：修正初始状态类型 #

将products的初始状态改为与后续结构匹配的对象，确保初始时all属性存在且为数组：

const [products, setProducts] = useState({ all: [] }) // 初始化为带all属性的空数组对象
const [filteredProducts, setFilteredProducts] = useState([])

useEffect(() => {
  const getCategoriesMap = async () => {
    const categoryMap = await getCategoriesAndDocuments('categories')
    const all = Object.values(categoryMap).reduce((acc, arr) => acc.concat(arr), [])
    setProducts({ all, ...categoryMap })
  }
  getCategoriesMap()
}, [])

// 依赖products变化时更新filteredProducts
useEffect(() => {
  setFilteredProducts(products.all)
}, [products])

步骤2：组件中添加兜底处理 #

在使用products的组件中，为可能的undefined添加兜底，确保数组操作安全：

const { products } = useContext(ProductsContext)
// 兜底为空数组，避免filter返回undefined
const newCollection = products?.all?.filter(product => product.new === true) || []

const maxSteps = newCollection.length

return (
  <div className='new-img' style={{ 
    backgroundImage: `url(${newCollection[activeStep]?.imgUrl || ''})` 
  }}></div>
)

步骤3：优化派生状态（可选） #

如果filteredProducts只是products.all的直接引用，完全不需要单独存为状态，直接在组件或Context中使用products.all即可，减少不必要的状态更新：

// Context中无需filteredProducts状态，直接提供products
// 组件中直接使用products.all
const newCollection = products?.all?.filter(...) || []

关键React概念回顾 #

• 状态更新的异步性：React会批量处理状态更新，setState调用后不会立刻改变状态值，闭包中会保留更新前的状态。
• 初始状态一致性：初始状态的类型和结构应尽量与后续状态匹配，避免渲染时出现类型不匹配的错误。
• 派生状态的处理：由其他状态计算而来的值，优先直接计算而非存为单独状态，可避免同步问题。

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