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

Question

项目中前端自定义了数组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完全一样

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

Answer 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 },
            ]

            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)

Answer 2

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

Answer 3

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")