删除对象数组中元素的重复出现，但保持一个属性更改起反应

Question

我已经尝试了很长时间并且给我留了白发

我有一个从套接字接收数据流的组件。我将数据显示在表中，并且如果删除具有相同ID的订单时，应该更新对象的属性。

这是我的组件

import React, { Component } from 'react';
import './App.scss';
import { subscribeToTimer } from './api';
import Board from './components/Board';
import Stream from './components/orderStream';

class App extends Component {
  constructor(props) {
    super(props);
    subscribeToTimer((err, Order) => this.setState(state => ({
      Orders: [...state.Orders, Order] 
    })));
  }
  state = {
    Orders: []
  };
  render() {
    const { Orders } = this.state;
    const { name, event_name } = Orders[Orders.length - 1] || {}; // get the names from the laster order - or undefined if none
    return (
      <div className="App">
        <Stream/>
        <Board 
         Orders = {this.state.Orders}
        />

      </div>  
    );
  }
}

export default App;

这里我遇到问题

import React, { Component } from 'react'
import Card from '../components/Card'


class Board extends Component {


    constructor(props){
      super(props);
      this.renderTableRows= this.renderTableRows.bind(this);

    }

    renderTableRows(order){
      //massage data
      if (order.length > 2 ) {
        let element  = order[order.length-1];
        for(var i = 0; i < order.length; i++) {
            if (order[i].id === element.id) {
                order[i].event_name = element.event_name;
                console.log("here",order.length);
                console.log("element",order[order.length-1]);
                let index = order.length-1
                order.splice(index,1);
            }
        }
      }



      return order.map(order => (
        <Card
          key = {order.id}
          ID = {order.id}
          Name ={order.name}
          Status ={order.event_name}
          Time = {order.sent_at_second}
          Destination ={order.destination}
        />
      ));
    }

    render() {
        return (
        <div className="main-board flex-grid">
          <div id='resp-table'>
            <div id='resp-table-header'>
              <div className='table-header-cell order-ID'>
                Order ID
              </div>
              <div className='table-header-cell order-name'>
                Order Name
              </div>
              <div className='table-header-cell order-status'>
                Status
              </div>
              <div className='table-header-cell order-time'>
                Time
              </div>
              <div className='table-header-cell order-destination'>
                Destination
              </div>
            </div>
            <div id='resp-table-body'>
              {this.renderTableRows(this.props.Orders)}
            </div>
          </div>
        </div>
        )
    };
}

export default Board;

如果我这样做，则我的数据在找到所有出现的内容后就会停止，因为它会删除所有传入的元素。如果我不执行for循环，我的表将填充所有数据，这些数据会将所有重复项作为其新条目。

感谢您的帮助

Answer 1

renderTableRows(orders){
  //massage data
  var uniqueOrders = [];
  orders.reverse().forEach(function(order) {
    if (!uniqueOrders.some(x => x.id === order.id)) {
      uniqueOrders.push(order);
    }
  });

  return uniqueOrders.map(order => (
    <Card
      key = {order.id}
      ID = {order.id}
      Name ={order.name}
      Status ={order.event_name}
      Time = {order.sent_at_second}
      Destination ={order.destination}
    />
  ));