比較具有相同字段的兩個數組 => 如果值不同，則在 html 表中突出顯示

Question

我有兩組數組作為來自 API 的響應，例如服務器響應是

let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}];

讓最新= [{firstVal:'1.2'},{SecondVal:'4.2'}]

該表將顯示最新數組的值並且邏輯不同值應以粗體突出顯示

| 列 1 | 列2 |
| 1.2 | 4.2 |

Answer 1

假設您正在渲染一張表格。 我假設這就是可視化這些數據的意義所在。

然后您將存儲您的第一個響應並將其存儲為它並呈現默認表

現在，當您收到最新回復時。 您將開始比較行，然后按列進行比較，如果存在差異，則呈現的值應該用標記包圍以使其變為粗體。 這是一個粗略的代碼

假設一個反應應用程序

function RenderRow({row, index, latest}){
  if(latest.length < index) {
     console.log("This should not be possible")
     return null
  }

  return <tr>
  {
    row.map((column, c_index) => {
      if(latest[index][c_index] === column){
         return <td>{column}</td>
      }
      return <td><b> {column} </b></td>
    })
  }
  </tr>
}


function TableBody({original, latest}) {

  return <tbody>
   {
      original.map((row, index) => 
         <RenderRow row={row} index={index} latest={latest}/>
      )
   }
  </tbody>
}

function RenderAll(){
  let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}];

  let latest= [{firstVal:'1.2'},{SecondVal:'4.2'}]
  return <Table latest={latest} original={original}/>
}