React中如何根据main过滤desc对象并提取指定值

我来帮你搞定这个问题～你的代码里有两个关键问题导致没得到想要的结果：

1. data.main是逗号分隔的字符串，不是单个ID：你直接用d.id === data.main，相当于拿'1'和'1,3,5'做比较，肯定匹配不上；
2. find()方法只返回第一个匹配项：即使条件对了，它也只会给你第一个符合的对象，而你需要的是多个匹配的条目，应该用filter()。

正确的实现步骤： #

• 先把data.main分割成ID数组：data.main.split(',')会得到['1','3','5']；
• 用filter()筛选出desc中id在这个数组里的所有对象；
• 如果只需要提取value值，可以再用map()把结果转换成值的数组。

修改后的完整代码： #

const data = {
  main: '1,3,5',
  desc: [
    { id: '1', value: 'xyz' },
    { id: '2', value: 'abc' },
    { id: '3', value: 'qwer' },
    { id: '4', value: 'cwer' },
    { id: '5', value: 'poiu' }
  ]
}
export default function App() {
  // 把main字符串转成ID数组
  const targetIds = data.main.split(',');
  // 筛选出符合条件的对象
  const matchedItems = data.desc.filter(item => targetIds.includes(item.id));
  // 如果只需要value值，可以用map提取
  const matchedValues = matchedItems.map(item => item.value);
  
  console.log('匹配的对象:', matchedItems);
  console.log('提取的value值:', matchedValues);
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>匹配的结果：</h2>
      {/* 渲染所有匹配的value */}
      {matchedValues.map((val, index) => (
        <p key={index}>{val}</p>
      ))}
    </div>
  );
}

代码说明： #

• split(',')：把'1,3,5'拆分成字符串数组['1','3','5']，方便后续判断；
• filter()：遍历desc数组，保留所有id在targetIds里的对象；
• map()：把筛选后的对象数组转换成只包含value的数组，满足你“提取值为xyz、qwer、poiu的条目”的需求。

这样就能得到你想要的结果啦～

内容的提问来源于stack exchange，提问作者Parth Tiwari