Блог

Главная - Вопросы по программированию - (Реагирует-Родной) Зачем делать рендеринг дважды?

(Реагирует-Родной) Зачем делать рендеринг дважды?

#javascript #react-native

Вопрос:

Здравствуйте, я работаю над программой gps. Однако возникла проблема с функцией визуализации. Проблема в том, что моя функция вызывается дважды при вызове.

Это мой код

 playSound = async() => {
    console.log('Loading Sound');
    const { sound } = await Audio.Sound.createAsync(
       require('../sound/test.mp3')
    );
    
    console.log('Playing Sound');
    await sound.playAsync(); }

componentDidMount(){
    this.interval = setInterval(this.geoLocation, 3000);
    
}
render() {
    if(this.state.lat>10 amp;amp; this.state.lat<11){
      this.interval2 = setInterval(this.playSound, 2000);
      Alert.alert(
        "",
        "reach goal.",
        [
          { 
            text: "turn off", onPress: () => clearInterval(this.interval2)
          }
        ]
      );
      clearInterval(this.interval)
    }

Как я могу это исправить? Пожалуйста, помогите мне..

Комментарии:

1. Я работаю в основном с функциональными компонентами, но каждый раз, когда вы меняете состояние в функциональном компоненте setIterval() , он запускает этот компонент. Я предполагаю, что это то же самое для компонента класса.

2. Должен ли я использовать setInterval() только один раз?

3. Можете ли вы точно объяснить, как вы хотите вызвать playsound метод? Или просто, когда должен воспроизводиться звук?

4. Вы не должны знать или беспокоиться о том, сколько раз React отображает ваши компоненты, если только нет проблем с производительностью. Произвольные побочные эффекты (например, окно. предупреждение) в функциях рендеринга не поддерживаются, и в документах об этом довольно ясно сказано.

Ответ №1:

В среде разработки React намеренно дважды вызывает метод визуализации, чтобы обнаружить проблемы.

Поскольку вы вызываете setInterval функцию внутри метода рендеринга, пожалуйста, поставьте условие, чтобы проверить, задано ли оно уже перед установкой интервала.

Что-то вроде:

 if(this.state.lat>35.83025 amp;amp; this.state.lat<35.8303 amp;amp; !this.interval2){

Вы можете проверить этот блог, чтобы узнать больше. Кроме того, вы можете попробовать создать приложение и проверить, есть ли еще двойные рендеры, которых не должно быть.

Но в идеале вы не должны вызывать какой-либо эффект в методе визуализации. используйте методы жизненного цикла, как componentDidUpdate здесь, чтобы проверить изменения в состоянии или реквизитах и задать интервал в нем. В противном случае вы также можете установить интервал в componentDidMount зависимости от реализации.

Метки: