当两个setState()运行时,setState()阻止UI

时间:2019-05-29 03:42:23

标签: reactjs react-native setstate react-state-management react-state

这是我的objecta.ntime[0] 方法:

componentDidMount()

在上述方法中,每100毫秒状态都会变化。我在componentDidMount() { const subscription = accelerometer.subscribe(({ x, y, z, timestamp }) => { x = Math.trunc(x*100); this.setState({x}) }); } 方法中使用了该状态,如下所示:

render()

现在,问题是当我尝试打开侧菜单时,它没有打开,我的意思是打开了但挂得太多了。我的整个应用程序挂得太多了。

我认为是因为以下方法:

render() {
    const animatedImageStyle = StyleSheet.flatten([
      styles.captureButton,
      {
        transform: [{rotateZ:this.state.x + 'deg'}]
      }
    ])

    return (
      <SideMenu 
        menu={leftMenu}
        isOpen={this.state.isOpenLeftMenu}
        menuPosition={'left'}
        bounceBackOnOverdraw={false}
        onChange={(isOpenLeftMenu) => this.updateLeftMenuState(isOpenLeftMenu)}
      >
        <View>
            <TouchableOpacity 
                activeOpacity={0.5}
                onPress={(this.state.recordingMode == 'camera')?() => this.takePicture():() => this.toggleRecording()}
              > 
                <Image 
                  source={require('../assets/imgs/forRotate.png')}
                  style={animatedImageStyle}
                />
            </TouchableOpacity>
        </View>
      </SideMenu>
    )
}

请注意,我正在更新另一个名为updateLeftMenuState(isMenuOpen) { this.setState({ isOpenLeftMenu:isMenuOpen }) } 的状态,该状态在我更新状态isOpenLeftMenu时可能被阻止。

谁能告诉我这是怎么回事?

1 个答案:

答案 0 :(得分:0)

您可以将动画视图与订阅逻辑一起移动到单独的组件中。因此,该组件的状态更新不会影响SideMenu组件。