setState () блокирует пользовательский интерфейс при запуске двух setState () - PullRequest
Новая
       33

setState () блокирует пользовательский интерфейс при запуске двух setState ()

0 голосов
/ 29 мая 2019

Вот мой componentDidMount() метод: 

componentDidMount() {
    const subscription = accelerometer.subscribe(({ x, y, z, timestamp }) => {
        x = Math.trunc(x*100);
        this.setState({x})
    });
}

В приведенном выше методе, каждые 100 миллисекунд состояние меняется. Я использовал это состояние в моем 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, которое может быть заблокировано во время обновления состояния x.

Может кто-нибудь сказать мне, что здесь не так?

1 Ответ

1 голос
/ 29 мая 2019

вы можете переместить вид анимации в отдельный компонент вместе с логикой подписки. Таким образом, обновление состояния этого компонента не повлияет на компонент SideMenu.

...