a543462378 2022-04-27 15:09 采纳率: 87.9%
浏览 236
已结题

react中如何把后端返回的数组合并入前端定义的数组

项目中前端自定义了数组1,然后访问后台接口获得数组二,要根据shipType参数把两个数组合并成一个

// 前端定义的数组1
const tableList = [
    { shipType: "0", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "1", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "2", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "3", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "4", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "5", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "6", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "7", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "8", useFrequency: 0, useDuration: 0, useAmount: 0 },
    { shipType: "9", useFrequency: 0, useDuration: 0, useAmount: 0 },
  ]
{
  "code":"0",
  "data":{
      "detailedList":[],
      "list":[
            { shipType: "3", useFrequency: 9, useDuration: 34, useAmount: 6 },
            { shipType: "5", useFrequency: 8, useDuration: 0, useAmount: 12 },
      ],
      "logInfo":[],
      "msg":"成功"}

我写了几个方法都不成功

// 方法一
let tableLists = tableList.map(item => item.shipType === res.data.list.shipType ? res.data.list : item)
        console.log(tableLists)
// 输出结果和数组1完全一样
// 方法二
        for(let i=0;i<tableList.length;i++){
          if(tableList[i].shipType === list1.shipType){
            tableList[i] = list1
          }
        }
// 输出结果和数组1完全一样

要怎么写?或者我写的方法有什么不对的地方?

  • 写回答

3条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-27 15:37
    关注
    
                const tableList = [
                    { shipType: "0", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "1", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "2", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "3", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "4", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "5", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "6", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "7", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "8", useFrequency: 0, useDuration: 0, useAmount: 0 },
                    { shipType: "9", useFrequency: 0, useDuration: 0, useAmount: 0 },
                ]
    
                const list = [
                    { shipType: "3", useFrequency: 9, useDuration: 34, useAmount: 6 },
                    { shipType: "5", useFrequency: 8, useDuration: 0, useAmount: 12 }
                ]
    
                for (let i = 0; i < list.length; i++) {
                    for (let j = 0; i < tableList.length; j++) {
                        if (list[i].shipType === tableList[j].shipType) {
                            tableList[j] = list[i]
                            break
                        }
                    }
                }
                console.log('tableList', tableList)
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 溪风沐雪 2022-04-27 15:25
    关注

    你参考一下这个文档吧,里边介绍了挺多种方法的:
    https://wenku.baidu.com/view/c0e2eddd920ef12d2af90242a8956bec0975a5d5.html

    评论
  • 崽崽的谷雨 2022-04-27 15:38
    关注

    shipType相等就 换成 接口的 数据?
    fileterData就是你要的 数据

     // 前端定义的数组1
       let tableList = [
          { shipType: "0", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "1", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "2", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "3", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "4", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "5", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "6", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "7", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "8", useFrequency: 0, useDuration: 0, useAmount: 0 },
          { shipType: "9", useFrequency: 0, useDuration: 0, useAmount: 0 },
       ];
    
       let json = {
          "code": "0",
          "data": {
             "detailedList": [],
             "list": [
                { shipType: "3", useFrequency: 9, useDuration: 34, useAmount: 6 },
                { shipType: "5", useFrequency: 8, useDuration: 0, useAmount: 12 },
             ],
             "logInfo": [],
             "msg": "成功"
          }
       };
       let data=json.data.list;
      let filterData=tableList.map((item)=>{
          data.map((item1)=>{
            if(item.shipType==item1.shipType){
               item=item1;
            }
          })
          return item;
       });
       console.log(tableList,filterData,"99")
    
    
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 5月5日
  • 已采纳回答 4月27日
  • 创建了问题 4月27日

悬赏问题

  • ¥15 页面调接口时加载卡住不响应
  • ¥35 用C语言解决编程问题
  • ¥15 unity硬件连接与使用
  • ¥15 鱼缸加热棒的数据分析或者实际案例也行
  • ¥15 postgresql11安装完成后,pgadmin无法启动
  • ¥15 (标签-无人机|关键词-Matlab代码)
  • ¥15 执行shell脚本提示参数太多
  • ¥15 困扰好久了,电脑的串口调试助手向单片机发送一个字符(如:字符‘1’到‘8’),单片机点亮对应的灯(如发送字符‘2’则点亮第2个灯)并给电脑回复信息:已点亮第x个灯(其中 x 要替换成对应的数字)
  • ¥15 求减少这个c++程序内存的解决方案
  • ¥30 改正代码,错误比较多