React中.map()生成组件后使用.includes()检测元素失败求助

你的思路绕了弯路，而且方向完全错了——你检测的是React组件数组，不是原始的水果数据数组，所以includes('apple')永远返回false。

错误原因 #

• filteredData.map()生成的DisplayData是React元素（组件对象）数组，每个元素是类似<div><ul><li>apple</li></ul></div>的JSX对象，不是字符串'apple'。
• 你把这些组件对象转成valuesnew数组后，数组里全是组件对象，根本没有字符串'apple'，自然检测不到。

正确实现 #

直接在原始的filteredData数组上做检测，用数组的some()方法（只要有一个元素满足条件就返回true，性能更优）：

修改后的核心代码：

import React from 'react';
import PropTypes from 'prop-types'; // 别忘了导入PropTypes

function Fruits({ filteredData }) {
  // 直接检测原始数据数组
  const hasApple = filteredData.some(item => item.fruitname === 'apple');

  // 组件渲染部分保留你的逻辑即可
  const DisplayData = filteredData.map((info) => (
    <div key={info.fruitname}> {/* 注意要加key，React列表渲染要求 */}
      <ul id="result" type="disc">
        <li>{info.fruitname}</li>
      </ul>
    </div>
  ));

  return (
    <section>
      {String(hasApple)} {/* 这里会显示true */}
      {/* 如果需要渲染列表，加上{DisplayData} */}
    </section>
  );
}

Fruits.propTypes = { // 这里应该是Fruits，不是App
  filteredData: PropTypes.arrayOf(PropTypes.shape({
    fruitname: PropTypes.string.isRequired,
    fruitprice: PropTypes.string.isRequired,
  })),
};

export default Fruits;

额外提示 #

• React列表渲染时，每个元素必须加唯一的key属性，避免控制台警告。
• 你代码里的App.propTypes写错了，组件名是Fruits，所以要改成Fruits.propTypes。
• some()方法比遍历整个数组找元素更高效，一旦找到匹配项就停止遍历。

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