1

I am having some issues with a particular component not properly updating. This component is effectively modeled after each of the other components, the only difference that I can determine is that it receives props that are array elements; although I have switched the variable being passed so that it renders store elements that are working elsewhere, though I am still getting the same update issue.

The weird thing about this is that the component update does fire, but only when one of the other elements that is properly updating is triggered, so it logs the console object on this instance for two different checks within the componentDidUpdate function.

The overall design is a basic React/Redux app, with a component that is designed to hold/render the audio events. I have a MainLayout component that renders the AudioEngine component, followed by multiple "Panel" components that are only specified for the UI. It is this component that is passed the redux store. It appears that the redusx store is handling state properly, and is passing the data back as expected; however, it is only this element of the UI that is failing to properly trigger an update.

Within the AudioEngine component:

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
    });
}

Here is the return from the MainLayout component, which receives the stor/props (sorry this is still a bit of a work in progress):

 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>     
)

The LfoPanel component is designed much of the same way as the others...

Any pointers would be quite helpful, perhaps it is passing array elements as properties? If that is the case, that seems like a strange gotcha. Thank-you in advance...

Chad Denaux
  • 139
  • 1
  • 12
  • 1
    What does `props.lfoRate` look like? What type is it? – Henry Woody Dec 26 '18 at 21:27
  • it is a float value. I did not originally have it set up like that, initially just passing the LFObj as an array and then breaking it down within the components themselves. I figured that breaking it down in the main component that has direct access to the store would be easier for allowing the components to update... – Chad Denaux Dec 26 '18 at 21:32
  • You can see it as a prop in the MainLayout component, as passed to both AudioEngine(the main audio component) and LfoPanel (the UI sub-component). – Chad Denaux Dec 26 '18 at 21:35
  • 1
    Where does the `LFObj` prop get updated? I think that's from Redux, but can you include the code for where this prop is updated? – Henry Woody Dec 26 '18 at 22:46
  • I could do that, but I don't think that is where the issue is. The store is being updated, as I can tell through the console, but for some reason the UI component (LfoPanel) itself is not triggering a re-render/update. The componentDidUpdate check fires, but only when one of the other components is altered. This is what is making this so incredibly frustrating, especially given that I do not see a discernable difference in the structure of that component. – Chad Denaux Dec 26 '18 at 23:33

1 Answers1

1

Ok, so after some further research, I realized that it was in fact a mutability issue from Redux. Even though it was technically updating the state, it was not properly immutable. I ended up using the primary solution from this question.

Thanks to those who looked / took time to respond. Hopefully this reference will save another React-Redux a headache later on :)

Chad Denaux
  • 139
  • 1
  • 12