在触发操作后检测新值，然后将它们传递给属性

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

更新和简化了我的答案，因为我不知道根据解释完全理解您的要求，所以如果这足以理解，请将此标记为答案或进一步解释您需要做什么（如果您需要添加/删除并更新项目，并且此类只会刷新后改变等。）