在这个场景中应该使用filter方法，

return (
    <section>
      {fruitData
        .filter((fruit) => fruit.fruitcolor === "red")
        .map((info) => (
          <span>{info.fruitname} </span>
        ))}
    </section>
  );

Check demo

使用filter方法过滤red颜色

const filteredData = fruitData.filter((fruit) => fruit.fruitcolor === "red")
console.log(filteredData);

给你！

function App() {
const fruitData = [{ fruitname: 'apple', fruitprice: '200’, fruitcolor: ‘red’},
{ fruitname: 'mango', fruitprice: '500’, fruitcolor: ‘yellow’},
{ fruitname: ’berry', fruitprice: ‘300’, fruitcolor: ‘red’}]

const filteredFruits = fruitData.filter((item) => item.fruitcolor === "red")

return (
<section>
  {filteredFruits.map((fruit) => {
   // Your code
   })}
</section>
)
}
export default App;

嘿，你可以尝试使用数组方法Map来复制你的数据并显示结果。

const fruitData = [
    { fruitname: "apple", fruitprice: "200", fruitcolor: "red"},
    { fruitname: 'mango', fruitprice: '500', fruitcolor: 'yellow'},
    { fruitname: 'berry', fruitprice: '300', fruitcolor: 'red'},
];
return (
 <section>
   {fruitData.map((data) => {
     if (data.fruitcolor === "red") return data;
   })}
</section>
)

在使用Array.map()方法时，可以避免添加任何转义逻辑，而是在使用Array.map()之前使用Array.filter()方法。

const fruitData = [{
    fruitname: "apple",
    fruitprice: "200",
    fruitcolor: "red"
  },
  {
    fruitname: "mango",
    fruitprice: "500",
    fruitcolor: "yellow"
  },
  {
    fruitname: "berry",
    fruitprice: "300",
    fruitcolor: "red"
  },
];

const filteredFruitData = fruitData.filter(
  ({
    fruitcolor
  }) => fruitcolor === "red"
);

console.log("filteredFruitData", filteredFruitData);