React报错：filteredfruitData.map is not a function 及数据过滤求助

错误原因 #

出现filteredfruitData.map is not a function的核心原因是你定义的filteredfruitData不是数组类型，可能是筛选逻辑错误导致它变成了undefined、单个对象或其他非数组值，而map方法仅能在数组上调用。

正确筛选实现 #

直接使用数组的filter()方法筛选颜色为'red'的水果，该方法会返回一个新数组，完全支持后续调用map方法：

import React from 'react';

const FruitComponent = () => {
  const fruitData = [
    { fruitname: 'apple', fruitprice: '200', fruitcolor: 'red'},
    { fruitname: 'mango', fruitprice: '500', fruitcolor: 'yellow'},
    { fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'}
  ];

  // 正确筛选逻辑：返回符合条件的新数组
  const filteredfruitData = fruitData.filter(fruit => fruit.fruitcolor === 'red');

  return (
    <div>
      {/* 安全调用map渲染筛选结果 */}
      {filteredfruitData.map((fruit, index) => (
        <div key={index} className="fruit-item">
          <p>名称：{fruit.fruitname}</p>
          <p>价格：{fruit.fruitprice}</p>
          <p>颜色：{fruit.fruitcolor}</p>
        </div>
      ))}
    </div>
  );
};

export default FruitComponent;

最终筛选结果 #

上述代码中filteredfruitData的最终值完全符合需求：

const filteredfruitData = [
  { fruitname: 'apple', fruitprice: '200', fruitcolor: 'red'},
  { fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'}
];

额外提示 #

• 若fruitData是异步获取的接口数据，建议先做存在性判断（比如fruitData?.filter(...)），避免初始状态为undefined时触发错误。
• 使用map时务必给子元素添加唯一key属性，优先使用数据自身的唯一标识（如id字段），而非示例中的index（仅作简单演示）。

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