反應有條件的樣式不能正確呈現

好吧，所以我有一個非常有趣的問題，有條件地呈現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

很高興你解決了這個問題！ –

反應有條件的樣式不能正確呈現

回答

相關問題