Question

我遇到某些问题，即特定组件无法正确更新。这个组件是在其他每个组件之后进行有效建模的，我可以确定的唯一区别是它接收的是数组元素props。尽管我已经切换了传递的变量，以便它呈现在其他地方工作的商店元素，但是我仍然遇到相同的更新问题。

关于这一点的怪异之处是，组件更新确实会触发，但是仅当触发了其他一个正确更新的元素时，才将控制台对象记录在此实例上，以便在componentDidUpdate函数中进行两次不同的检查。 / p>

总体设计是一个基本的React / Redux应用程序，其组件旨在保存/呈现音频事件。我有一个MainLayout组件，该组件呈现AudioEngine组件，后跟多个仅为UI指定的“面板”组件。正是这个组件传递了redux存储。似乎redusx存储正在正确处理状态，并且正在按预期方式将数据传递回；但是，只有UI的这一元素无法正确触发更新。

在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组件的设计与其他组件大致相同...

任何指针都将非常有帮助，也许它将数组元素作为属性传递？如果是这样，那似乎是一个奇怪的陷阱。提前谢谢...

Answer 1

好的，所以经过进一步研究，我意识到这实际上是Redux的一个可变性问题。即使在技术上更新状态，它也不是正确不变的。我最终使用了此question中的主要解决方案。

感谢那些看过/花时间回答的人。希望这个参考文献将在以后为另一个React-Redux带来麻烦：）

我试图了解为什么componentDidUpdate不针对特定组件触发

1 个答案: