reactjs - TypeError：products.map 不是函数。我该如何解决

Question

我看过类似的问题，但还没有找到真正有效的答案。这是我的 GridView 代码：

const GridView = ({ products }) => {
         return (
         <Wrapper>
            <div className="products-container">
               {products.map((product) => {
                return <Product key={product.id} {...product} />
              })}
             </div>
          </Wrapper>
       )
      }

这是我的 ProductList 代码：

const ProductList = () => {
  const {filtered_products:products} = useFilterContext();

  return <GridView products={products}>games list</GridView>
}

这是我的 FilteredContext 代码：

const initialState = {
  filtered_products:[],
  all_products:[]
}
  
const FilterContext = React.createContext()

export const FilterProvider = ({ children }) => {
  const {products} = useProductsContext();
  const[state,dispatch] = useReducer(reducer, initialState)


  useEffect(() => {
    dispatch({type:LOAD_PRODUCTS, payload:products})
  },[products])
  
  return (
      <FilterContext.Provider value={{...state}}>
      {children}
    </FilterContext.Provider>
  )
}

标签： reactjs

Answer 1

使用条件渲染，以防出现productsisnull或undefinedthen 您可能会收到此错误。

const GridView = ({ products }) => {
         return (
         <Wrapper>
            <div className="products-container">
               {products && products.map((product) => {
                return <Product key={product.id} {...product} />
              })}
             </div>
          </Wrapper>
       )
      }

另外，请确保 products 是一个数组。