удалить повторяющееся вхождение элемента в массиве объектов, но сохранить одно изменение свойства реагировать

Question

Я пробовал это в течение долгого времени и дал мне седые волосы

У меня есть компонент, который получает поток данных из сокета. Я отображаю данные в таблице, и мне следует обновить свойства объекта, если при удалении этого экземпляра появляется заказ с тем же идентификатором.

вот мои компоненты

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 (ордера) на что-то вроде этого:

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}
    />
  ));