프로덕션 빌드에서 자동으로 업데이트되지 않는 구성 요소

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에 roomId 3) 복사, 새로운 방을 클릭 탭 # 1에 2 위의 링크)를 사용하여 열고 두 개의 탭, 코드 입력란에 roomId를 붙여 넣은 다음 방을 클릭하십시오.

Tab # 1은 방금 참여한 사용자 (dev env에서 작동 중임)와 자동으로 업데이트됩니다. 이상한 F12 키를 누르면 업데이트됩니다.

어떤 아이디어로주세요?

편집 : 나는 또한 내가 배열에 setState를 사용할 때, 그것은 렌더링 호출 것을 깨달았지만, UI가 자동으로 업데이트되지 않습니다 Edit2가 https://github.com/danruziska/poc-planning-poker

: 소스 코드는 여기에있다. 하나의 값을 setState하면 ​​작동합니다 ...

Answer 1

문제점 (종류)을 발견했습니다. 내가 사용한 다른 구성 요소 인 reaction-inline-grid와 충돌이있었습니다. 그리드를 가져 가면 다시 작동합니다.