Question

我正在开发一个使用react-swipeable的组件。当用户向左或向右滑动时，卡值会发生变化。

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应该与刚加入的用户自动更新（它在dev env中工作）。如果我按下F12，它只会更新，这很奇怪。

有什么想法吗？

编辑：源代码在此处：https://github.com/danruziska/poc-planning-poker

Edit2：我也意识到当我在数组中使用setState时，它会调用render，但UI不会自动更新。如果我将setState设置为单个值，它就可以...

Answer 1

我发现了问题（有点）。与我使用的另一个组件发生冲突：react-inline-grid。当我拿走Grid时，它再次起作用。

在生产构建

1 个答案: