2017-02-21 43 views
1

自動更新我正在開發,它使用反應-滑動式的部件的組件。當用戶向左或向右滑動時,卡片值會改變。陣營不是在生產版本

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 run build,然後推送到heroku master。

當我嘗試使用我的應用程序在生產中,該路由工作,但是當我刷卡(使用Chrome切換設備工具欄)它不會自動更新。如果我按F12,則會更新。我想知道什麼是錯的。

我的應用程序的鏈接是:https://poc-planning-poker.herokuapp.com/

1)使用上述 2鏈接)選項卡上的#1,單擊新建房間,然後複製roomId 3)在標籤#2,填寫暱稱打開兩個標籤,粘貼代碼領域的roomId,然後點擊加入

標籤#1應與誰剛剛加入的用戶自動更新(它的工作在開發中ENV)。它只會更新,如果我按F12,這很奇怪。

任何想法嗎?

編輯:源代碼是在這裏:https://github.com/danruziska/poc-planning-poker

EDIT2:我也意識到,當我在數組中使用的setState,它調用渲染,但用戶界面不會自動更新。如果我SETSTATE一個值,它的工作原理...

回答

0

我發現這個問題(種)。與我使用的另一個組件有衝突:react-inline-grid。當我拿到網格時,它再次運行。

+0

不是一個真正的解決方案,這是爲什麼網格中的問題? – bobber205