如何使用React从具有匹配键或名称的数组中拼接出数据

import React from 'react';

// 假设我们有一个对象数组，每个对象都有一个唯一的键（key）和一些数据
const data = [
  { key: 'A', value: 'Apple' },
  { key: 'B', value: 'Banana' },
  { key: 'C', value: 'Cherry' },
];

// 创建一个React组件来显示拼接后的数据
function DataList() {
  // 使用map()方法遍历数组，并为每个元素创建一个列表项
  const listItems = data.map((item) => (
    <li key={item.key}>
      {item.key}: {item.value}
    </li>
  ));

  // 将列表项拼接成一个无序列表
  return <ul>{listItems}</ul>;
}

export default DataList;

const listItems = data
  .filter(item => item.key === 'A' || item.key === 'B') // 过滤出键为'A'或'B'的数据
  .map(item => (
    <li key={item.key}>
      {item.key}: {item.value}
    </li>
  ));