反应有条件的样式不能正确呈现

好吧，所以我有一个非常有趣的问题，有条件地呈现className样式，它适用于一个表，但不适用于其他表。反应有条件的样式不能正确呈现

我使用的反应版本15.6.2

我映射了数据并返回第一个表行或基于第二如果是买还是不。

if (isBuy) { 
     return (
     <tr key={i} className={(newOrder ? 'updatedOrderTr' : '')} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}> 
      <td>{order[1].user_depth}</td> 
      <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td> 
      <td>{amount}</td> 
      <td>{price.toFixed(prec)}</td> 
     </tr> 
    ); 
    } else { 
     return (
     <tr key={i} className={(newOrder ? 'updatedOrderTr' : '')} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}> 
      <td>{price.toFixed(prec)}</td> 
      <td>{amount}</td> 
      <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td> 
      <td>{order[1].user_depth}</td> 
     </tr> 
    ); 
    }

我呈现此组件，其向下传递构造这样

[ [1, {volume: 1, price: 3}], [2, {volume: 4, price: 2}] ]

数组的数组的唯一区别是一个表是卖出订单表和一个是买订单表，其中的两个实例表格单元格被颠倒。

购买订单行显示正常，并且样式显示正确（当newOrder为true时）。

销售订单表行只能随机工作。这是一个视频。

https://giphy.com/gifs/3o7aCPUNIy9oA46Y8g/fullscreen

通知我怎么也得杜绝垃圾邮件，让右侧来实际闪光。当在现实中的代码是完全相同的，只有TD的是相反的...

我很困惑，花了很多时间玩它。

我已经尝试使得应用样式的类只是简单的背景而不是动画。

这是我检查的条件。它检查订单数组当前索引与该数组以前的状态。

const newOrder = JSON.stringify(this.props.data[i]) !== JSON.stringify(this.state.previousTable[i]);

真的很感谢任何帮手！

来源

2017-10-19 Hayden Carlson

您是否检查过浏览器控制台的错误？你也可以包含你的代码为你的populateOrderForm方法吗？ –

没有控制台错误。 populateOrderForm方法与我的问题无关。这是一个完全不同的功能。问题在于在右侧渲染表格行。无论出于何种原因，他们只能周期性地工作......这引发了我的想法，因为除了单元格交换之外，代码实际上是相同的 –

我要求查看populateOrderForm的原因是因为您的问题可能是由于您变更了状态并获得了奇怪的副作用，效果。不确定您的应用是否在两个数据列表之间共享数据？如果他们是和你的代码是变异的数据，你可能会得到奇怪的影响。 –

我通过检查nextProps与currentProps进行比较来解决这个问题，并且如果它们中有变化，我然后设置导致重新渲染的状态。

右表（销售订单）没有更新的原因是有购买数据和销售数据下来的插座。销售订单几乎每次都会首先发布（这就是为什么它会定期工作）。

因为我没有检查道具是否改变了，状态被设置了多次，我无法看到风格。

componentWillReceiveProps(props) { 
    if (this.props.data !== props.data) { 
    this.setState({previousTable: this.props.data}); 
    } 
}

来源

2017-10-23 20:24:05

很高兴你解决了这个问题！ –

反应有条件的样式不能正确呈现

回答

相关问题