React报错filteredProducts.map is not a function问题排查

问题根因 #

.map()、.filter()都是JavaScript数组原型上的内置方法，仅能对数组类型数据调用，报错的核心原因是代码中filteredProducts在多个场景下不是数组类型。

具体问题点 #

• 状态初始值类型错误：初始化products、filteredProducts两个列表类状态时，默认值设为空对象{}，接口数据返回前的首次渲染阶段，filteredProducts是对象类型，直接调用.map()必然触发类型错误。
• 状态更新函数拼写错误：代码中写的setFilteredroducts漏了字符P，正确拼写应为setFilteredProducts，拼写错误会导致过滤结果无法正常赋值到状态。
• 过滤逻辑存在场景遗漏：过滤逻辑的useEffect加了cat &&前置判断，当路由无分类参数（加载全量商品）时，filteredProducts始终停留在初始空对象状态，不会被赋值为商品数组。
• 缺少数据类型校验：未校验接口返回的res.data结构，如果后端返回的是带分页信息的对象（如{list: [], total: 100}）而非纯数组，直接调用.filter()也会触发类型错误；同时过滤逻辑中直接调用item[key].includes(value)，如果商品不存在对应筛选字段，会抛出读取属性的异常。
• 请求异常无兜底：接口请求报错时未重置状态，错误场景下列表状态可能被异常赋值。

修复方案 #

1. 修正状态初始值 #

列表类状态统一用空数组作为默认值，从根源上避免类型错误：

const Products = ({ cat, filters, sort }) => {
  // 修正初始值为数组，修正状态更新函数拼写
  const [products, setProducts] = useState([])
  const [filteredProducts, setFilteredProducts] = useState([])

  // ...其余逻辑

2. 修正接口请求逻辑 #

增加返回值校验，补齐全量商品场景的状态赋值、异常兜底：

useEffect(() => {
  const getProducts = async () => {
    try {
      const res = await axios.get(
        cat 
          ? `http://localhost:5000/api/products?category=${cat}` 
          : "http://localhost:5000/api/products"
      );
      // 校验返回值，确保赋值给products的是数组；如果后端返回结构为对象，取对应数组字段即可（如res.data.list）
      const productList = Array.isArray(res.data) ? res.data : []
      setProducts(productList)
      // 无分类参数时，直接将全量商品设为初始过滤结果
      if (!cat) setFilteredProducts(productList)
    } catch (error) {
        console.log(error);
        // 请求失败时重置列表为空数组，避免异常类型
        setProducts([])
        setFilteredProducts([])
    }
  };
  getProducts();
}, [cat])

3. 修正过滤逻辑 #

去掉多余的前置判断，增加字段健壮性校验：

useEffect(() => {
  // 兜底判断，非数组场景直接重置
  if (!Array.isArray(products)) {
    setFilteredProducts([])
    return
  }
  // 无筛选条件时直接返回原商品列表
  if (Object.keys(filters).length === 0) {
    setFilteredProducts(products)
    return
  }
  const filteredResult = products.filter((item) => 
    Object.entries(filters).every(([key, value]) => {
      const fieldVal = item[key]
      // 字段不存在时直接跳过该筛选条件
      if (fieldVal === undefined || fieldVal === null) return false
      // 统一转字符串匹配，兼容数字、布尔值等非字符串字段
      return String(fieldVal).includes(String(value))
    })
  )
  setFilteredProducts(filteredResult)
}, [products, cat, filters]);

4. 渲染层增加兜底 #

渲染时加可选链做最后一层防护，避免极端场景报错：

return (
  <Container>
    {filteredProducts?.map(item => (
      <Product item={item} key={item.id} />
    ))}
  </Container>
)

额外注意 #

• 后续实现排序逻辑时，可新增监听sort状态的useEffect，对filteredProducts做排序后更新状态即可。
• 所有承载列表数据的React状态，初始值永远优先使用空数组[]，不要使用空对象{}。

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