生産現場で自動的に更新されない反応コンポーネント

Question

反応スワイプ可能なコンポーネントを開発中です。ユーザーが左右にスワイプすると、カードの値が変更されます。

const values = [ 
'1', 
'2', 
'3', 
'5', 
'8', 
'13', 
'20', 
'40' 
] 

export default class UserContainer extends React.PureComponent{ 
constructor() { 
    super(); 
    this.state = { 
     currentIndex: 0, 
     cardValue:values[0] 
    } 
    this.swipedRight = this.swipedRight.bind(this);  
} 

swipedRight(){   
    var newIndex = this.state.currentIndex; 
    if(newIndex !== 0){ 
     newIndex-=1; 
     this.setState({ 
      currentIndex : newIndex, 
      cardValue: values[newIndex] 
     }); 
    } 
} 

render(){  
    return( 
     <Grid> 
      <Row is="center"> 
       <div style={{width:'170px'}} className={this.state.animationClass}> 
        <Swipeable onSwipedUp={this.swipedUp} onSwipedRight={this.swipedRight} onSwipedLeft={this.swipedLeft} >     
         <User cardValue={this.state.cardValue} userName={this.props.params.userName} />                   
        </Swipeable> 
       </div> 
      </Row> 
     </Grid>                     
    ); 
} 
} 

npm-start（私はcreate-react-appを使用しています）を実行すると、正常に動作します。私はherokuを使用して展開しました。最初にnpmを実行して実行し、その後heroku masterにプッシュします。

プロダクションで自分のアプリを使用しようとすると、ルートは機能していますが、Chromeのトグルデバイスツールバーを使用してスワイプすると自動的に更新されません。 F12を押すと更新されます。私は何が間違っているか知りたい。

マイアプリのリンクは次のとおりです。https://poc-planning-poker.herokuapp.com/

1） 2上記のリンクを使用してオープンつのタブ）タブ＃1で、新しい部屋をクリックして、タブ＃2でroomId 3）をコピーし、ニックネームを記入し、コードフィールドにroomIdを貼り付けてからJoin Roomをクリックしてください。

タブ1は、参加したばかりのユーザー（dev envで動作しています）と自動的に更新されます。 F12を押すと更新されますが、これは変です。

どのようなアイデアをお願いしますか？

編集：ソースコードはここにある：https://github.com/danruziska/poc-planning-poker

EDIT2：私はまた、私は、配列にSETSTATEを使用する場合、それはレンダリング呼び出しますが、UIが自動的に更新されていないことに気づきました。私が単一の値を設定すると、それは機能します...

Answer 1

私はこの問題を発見しました。私が使用した別のコンポーネント、react-inline-gridとの競合がありました。私がグリッドを取ったとき、それは再び働いた。