Я пытаюсь понять, почему componentDidUpdate не запускается для конкретного компонента - PullRequest
Новая
       13

Я пытаюсь понять, почему componentDidUpdate не запускается для конкретного компонента

0 голосов
/ 27 декабря 2018

У меня проблемы с конкретным компонентом, который не обновляется должным образом.Этот компонент эффективно моделируется после каждого из других компонентов, единственное различие, которое я могу определить, состоит в том, что он получает реквизиты, которые являются элементами массива;хотя я переключил передаваемую переменную так, чтобы она отображала элементы хранилища, которые работают в другом месте, хотя я все еще получаю ту же проблему обновления.

Странная вещь в том, что обновление компонента запускается, но толькокогда запускается один из правильно обновляющихся элементов, он регистрирует объект консоли в этом экземпляре для двух разных проверок в функции componentDidUpdate.

Общий дизайн - это базовое приложение React / Redux сКомпонент, предназначенный для хранения / визуализации аудио событий.У меня есть компонент MainLayout, который отображает компонент AudioEngine, а затем несколько компонентов «Panel», которые указаны только для пользовательского интерфейса.Именно этот компонент передается в хранилище избыточности.Похоже, что хранилище redusx правильно обрабатывает состояние и передает данные обратно, как и ожидалось;однако, только этот элемент пользовательского интерфейса не может правильно запустить обновление.

В компоненте AudioEngine: 

if(this.props.lfoRate != prevProps.lfoRate){
    console.log(this.state.lfoRate)
    this.setState({
        lfoRate: this.props.lfoRate
    }, () => {
        this.lfo['osc'].frequency.value = this.state.lfoRate
    });
}

Вот возвращение от компонента MainLayout, который получаетstor / props (извините, это все еще небольшая работа): 

 return(
  <div >
    <Header /> 
    <div style={mainLayoutStyle} className={"main-layout"}>

      {
          this.props.keyOn ? (<AudioEngine lfoRate={this.props.LFObj[2]} gain={this.props.masterGain} freq={this.props.masterFreq} oscArray={this.props.oscArray} 
          lfoType={this.props.LFObj[1]}  lfoFreq={this.props.LFObj[3]} count={count}/>) : (count % 2 == 0 ? (<AudioEngine count={0} gain={0} freq={this.props.masterFreq} oscArray={this.props.oscArray} 
          lfoType={this.props.LFObj[1]} lfoRate={this.props.LFObj[2]} lfoFreq={this.props.LFObj[3]}/>) : (''))  
      } 

      <MainPanel keyToggle={this.props.keyToggle} changeMasterGain={this.props.changeMasterGain} 
      masterGain={this.props.masterGain} keyOn={this.props.keyOn} baseFrequency={this.props.masterFreq}
      changeBaseFrequency={this.props.changeBaseFrequency} />
      <div style={{display: 'flex', flexFlow:'column'}} >
        <Oscillator addOsc={this.props.addOsc} subOsc={this.props.subOsc} oscArray={this.props.oscArray} />
        <LfoPanel lfoRate={this.props.LFObj[2]} lfoFreq={this.props.LFObj[3]} onChange={this.props.changeLFO}
         lfoType={this.props.LFObj[1]}/>
      </div>
     </div>

  </div>     
)

Компонент LfoPanel спроектирован почти так же, как и другие ...

Любойуказатели были бы весьма полезны, возможно, они передают элементы массива как свойства?Если это так, то это похоже на странную ошибку.Заранее спасибо ...

1 Ответ

0 голосов
/ 27 декабря 2018

Хорошо, поэтому после некоторых дальнейших исследований я понял, что это на самом деле проблема изменчивости от Redux.Несмотря на то, что оно технически обновляло состояние, оно не было должным образом неизменным.Я закончил тем, что использовал первичное решение из этого вопроса .

Спасибо тем, кто посмотрел / нашел время, чтобы ответить.Надеемся, что эта ссылка спасет еще один React-Redux от головной боли позже:)

...