Reactjs 在 React 中使用使用状态挂钩合并两个数组

[
  {
    "id": 1,
    "count": "2"
  },
  {
    "id": 2,
    "count": "1"
  }
  {
    "id": 3,
    "count": "1"
  }
  {
    "id": 4,
    "count": "1"
  }
  {
    "id": 5,
    "count": "1"
  },
]

[
  {
    "id": 1,
    "name": "Laptop"
  },
  {
    "id": 2,
    "name": "SSD"
  },
  {
    "id": 3,
    "name": "Keyboard"
  },
  {
    "id": 4,
    "name": "Mouse"
  },
  {
    "id": 5,
    "name": "Speaker"
  }
]

[
  {
    "id": 1,
    "count": "2",
    "name": "Laptop"
  },
  {
    "id": 2,
    "count": "1",
    "name": "SSD"
  },
  {
    "id": 3,
    "count": "1",
    "name": "Keyboard"
  },
  {
    "id": 4,
    "count": "1",
    "name": "Mouse"
  },
  {
    "id": 5,
    "count": "1",
    "name": "Speaker"
  }
]

const A = [ { id: 1, count: "2", }, { id: 2, count: "1", }, { id: 3, count: "1", }, { id: 4, count: "1", }, { id: 5, count: "1", }, ]; const B = [ { id: 1, name: "Laptop", }, { id: 2, name: "SSD", }, { id: 3, name: "Keyboard", }, { id: 4, name: "Mouse", }, { id: 5, name: "Speaker", }, ];

const output = A.map((itemA) => ({
  ...itemA,
  ...B.find((itemB) => itemB.id === itemA.id),
}));

console.log(output);

Reactjs相关问答推荐

有没有方法覆盖NextJS 14中的布局？

Redux Provider Stuck甚至彻底遵循了文档

面对动画警告：未指定`useNativeDriver`.这是必需的选项，并且必须在REACT本机中显式设置为`true`或`False`

如何访问子集合中的文档？

有没有一种惯用的方式来接受特定的子元素？

获取未捕获的错误：Gatsby生产版本上的最小化react 错误#418

MUiv5和TSS-Reaction SSR问题：无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

redux 工具包使用中间件构建器函数时，必须返回一个中间件数组

在react 中单击父级中的按钮时如何将数据从子级发送到父级？

部署到github pages时请求路径错误

为嵌套路由配置一个不存在的 url 的重定向

我可以更改 styled() 中的响应吗？ (MUI v5)

next js 13 在获取中使用标头时动态渲染而不是静态渲染？

在复选框中react 检索选中的值

将复杂状态和 setState 传递给更简单的 api

使用 react-router-dom 时弹出空白页面

如何修复 Next.js 13 中类型 AppRouterInstance 上不存在 x？

如何根据数据库中的值设置单选按钮选中？ - react

ClearInterval 在 React 中的 useRef 没有按预期工作

当上下文中的状态发生变化时，组件不会立即重新渲染