在觸發操作後檢測新值，然後將它們傳遞給屬性

Question

應用程序呈現表格行中值的數組的表格，任務是檢測在執行「REFRESH」表格後執行操作後呈現的新表格行併爲它們傳遞一個新的類名稱用於新行。

作爲一個新的反應和redux，我可以做到這一點，我知道有很多方法。

• 我們可以創建一個數組稱爲oldResult = []
• 通過舊行以它
• 環比oldResult []檢測到新值

這裏的功能：

let oldOrders = [] 
    const getNewOrders = (orders) => { 
     oldOrders.push(OrderList.orders); 
     for (let i in orders){ 
      if (orders.i != oldOrders[i]){ 
       return this.order.state = 'newClickablerow' 
      } 
     } 
    } 

這裏是表格行的渲染：

<tr key={i.toString()} 
       onClick={_onClick} 
       className={'clickableRow'} 
       onMouseLeave={() => this.props.selectOrder(null)} 
       onMouseEnter={() => this.props.selectOrder(order)}> 
       <td data-label='Bewertung'> 
        {this._renderScore(score, order.creation_date)} 
       </td> 
       <td data-label='Börse'> 
        <img src={TranseuLogo} className="ordertable-logo"/> 
       </td> 
       <td data-label='Von'> 
        {renderLocation(order.pickup.location)} 
       </td> 
       <td data-label='Nach'> 
        {renderLocation(order.delivery.location)} 
       </td> 
       <td data-label='Vor-/Haupt-/Nachlauf'> 
        {renderRoute(deadhead, order.route, bobtail)} 
       </td> 
       <td data-label='Fracht'> 
        <CargoSummary 
         content={{bodytypes: this.props.content.bodytypes}} 
         cargo={order.cargo}/> 
       </td> 
      </tr>) 

，這是值傳遞給表中的減速器：

function orders(state = [], action) { 
switch(action.type) { 
    case RECEIVE_ORDERS: 
     return action.orders; 
    case RECEIVE_ORDERS_ERROR: 
     return [] 
    case REFRESH:  
    default: 
     return state; 
} 

}

我不知道如何防火的功能和使用它的時候刷新操作被激發，又該我在刷新的情況下呢？

以及如何更改狀態（表格行的類名稱）？ 我搜索，發現我可以通過改變行狀態

constructor(props) { 
    super(props); 
    this.state = { 
     className : 'clickablerow' 
    } 
} 

Answer 1

避免Redux的狀態突變，以防止錯誤做到這一點。查看Redux文檔以獲得解釋和代碼示例：http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html#inserting-and-removing-items-in-arrays

根據您的確切用例（如更新/添加/刪除項目），您可以使用數組索引來映射並比較每個項目，並添加一個布爾屬性訂單對象上的「isNew」。如果您還想檢查更新的項目，並且可以刪除項目，那麼使用具有唯一ID的對象作爲循環每個項目的關鍵會更好。

如果您只想在從redux狀態更新時呈現className，則不必在訂單上使用本地「狀態」，除非您還想在之後更改它（例如，在點擊它之後再次刪除className幾秒鐘）。

如果你想比較整個對象的屬性，你可以使用的工具，方法，如lodash.isEqual和lodash.omit比較新的值之前刪除「是否新款」屬性，否則，如果你只是想添加/刪除項目，你只能比較該ID例如...

沒有測試這段代碼，但使用命令對象數組，並只是檢查對象在同一位置具有相同的ID添加「isNew」布爾值它看起來像這個：

function orders(state = [], action) { 
    switch(action.type) { 
    case RECEIVE_ORDERS: 
     return action.orders; 
    case RECEIVE_ORDERS_ERROR: 
     return [] 
    case REFRESH: 
     return refreshOrders(state.orders, action.orders) 
    default: 
     return state; 
    } 
} 

function refreshOrders (oldOrders, newOrders) { 
    return newOrders.map((newOrder, i) => { 
    // compare ID for same index and add a property isNew if it's different 
    const oldOrder = oldOrders[i] || {} // default to empty object if not found 
    const isNew = oldOrder.id === newOrder.id 
    return { ...newOrder, isNew } 
    }) 
} 

更新和簡化了我的答案，因爲我不知道根據解釋完全理解您的要求，所以如果這足以理解，請將此標記爲答案或進一步解釋您需要做什麼（如果您需要添加/刪除並更新項目，並且此類只會刷新後改變等。）