React中reducer报错：action.payload.filter is not a function问题咨询

错误根源 #

你遇到的TypeError: action.payload.filter is not a function，核心问题是传给reducer的payload不是数组。在fetchData函数里，data.json()是异步操作，返回的是Promise对象，你没加await就直接把这个Promise传给了dispatch，导致reducer里的action.payload是Promise而非产品数组，而Promise没有filter方法，所以报错。

修复步骤 #

1. 给data.json()添加await：确保拿到实际的产品数组再dispatch
2. 增加数组校验（可选但推荐）：在reducer里先判断action.payload是否为数组，避免意外报错
3. 完善错误处理：在catch块里更新state的isError状态，方便后续错误提示

修复后的完整代码 #

import React, { createContext, useContext, useEffect, useReducer } from 'react'

const reducer = (state, action) => {
  switch (action.type) {
    case 'IS_LOADING':
      return {
        ...state,
        isLoading: true
      }
    case 'MY_DATA':
      // 先校验是否为数组，再执行filter
      const featureData = Array.isArray(action.payload) 
        ? action.payload.filter(data => data.rating.rate >= 4.0)
        : []
      return {
        ...state,
        isLoading: false,
        isError: false,
        totalProducts: action.payload,
        featureProducts: featureData
      }
    case 'SET_ERROR':
      return {
        ...state,
        isLoading: false,
        isError: true
      }
    default: return state
  }
}

const AppContex = createContext()

const API = 'https://fakestoreapi.com/products'
const initialState = {
  isLoading: false,
  isError: false,
  totalProducts: [],
  featureProducts: []
}

const AppProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState)
    
  const fetchData = async () => {
    dispatch({ type: 'IS_LOADING' })
    try {
      const data = await fetch(API)
      // 这里必须加await，等待json解析完成拿到数组
      const products = await data.json()
      dispatch({ type: "MY_DATA", payload: products })
    } catch (error) {
      console.log(error)
      // 触发错误状态更新
      dispatch({ type: 'SET_ERROR' })
    }
  }

  useEffect(() => {
    fetchData()
  }, [])
  
  return (
    <AppContex.Provider value={{ ...state }}>
      {children}
    </AppContex.Provider>
  )
}

const useProductContex = () => {
  return useContext(AppContex)
}

export { AppProvider, useProductContex, AppContex }

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