Réagissez le style conditionnel ne rend pas correctement

Question

Bon, donc j'ai un problème très intéressant avec un rendu conditionnel d'un style avec un className, ça marche pour une table mais pas pour l'autre.

J'utilise la version 15.6.2 réagir

je la carte sur les données et retourner la première ligne de la table ou le deuxième sur la base si elle est un achat ou non.

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

Je rends deux instances de ce composant qui passe vers le bas un tableau de tableaux structurés comme celui-ci

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

La seule différence est une table est la table vente de commandes et un est un ordres d'achat table où les cellules de la table sont inversées.

Les lignes d'ordres d'achat sont affichées correctement et le style s'affiche correctement lorsqu'il est supposé (lorsque newOrder a la valeur true). Les lignes de la table des ordres de vente ne fonctionnent que de manière aléatoire. Voici une vidéo.

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

Remarquez comment je dois le spam pour obtenir le côté droit de réellement flash. Quand en réalité le code est exactement le même, seuls les td sont inversés ...

Je suis très confus et j'ai passé de nombreuses heures à jouer avec.

J'ai essayé de faire de la classe qui obtient des styles appliqués simplement un fond uni au lieu d'une animation.

C'est ce que je vérifie l'état de. Ce qui vérifie l'index courant du tableau des ordres par rapport à l'état précédent de ce tableau.

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

Serait vraiment apprécier toutes les mains secourables!

Answer 1

J'ai résolu ceci en vérifiant nextProps par rapport à currentProps et s'il y avait un changement dans eux, j'ai ensuite mis l'état provoquant un re-rendu.

La raison pour laquelle la bonne table (ordres de vente) n'a pas été mise à jour est parce qu'il y avait des données d'achat et de vente de données descendant le socket. Les ordres de vente vont d'abord presque à chaque fois (c'est pourquoi cela fonctionnerait périodiquement). Parce que je ne vérifiais pas si les accessoires changeaient, l'état était réglé plusieurs fois et je ne pouvais pas voir le style.

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