2016-07-28 6 views
0

私はreact/reduxアプリケーションで作業していて、タブ付きコンポーネントが還元タブをアクティブタブ状態で使用したいと考えています。私はこれを、できるだけ一般的な方法で、私の異なるタブコンポーネントすべての間で機能を共有しようと試みました。これは、renderメソッドを次のように一般的なタブパネルの結果:react/reduxを使用してrender()内の新しい小道具で要素を複製すると、警告が表示されるのはなぜですか?

render() { 
    var activeTarget = this.props.panelState.tabPanes[this.props.tabPanelID] ? this.props.panelState.tabPanes[this.props.tabPanelID].activeTarget : this.props.defaultTarget; 
    var tabs = this.props.panelState.tabs; 
    var tabPanelID = this.props.tabPanelID; 
    // Add the tabPanelID and active properties to the tab pane children 
    const childrenWithProps = React.Children.map(this.props.children, 
     (child) => React.cloneElement(child, { 
      tabPanelID: tabPanelID, 
      active: activeTarget === child.props.id 
     }) 
    ); 
    // Render complete tab pane 
    return (
     <div> 
      <ul className="nav nav-tabs"> 
       {this.buildTabs()} 
      </ul> 
      <div className="tab-content"> 
       {childrenWithProps} 
      </div> 
     </div> 
    ); 
} 

はしかし、マップの呼び出しは、次の警告をもたらすように表示されます。

警告:SETSTATE(...):更新できません。既存の状態遷移中(renderまたは他のコンポーネントのコンストラクタ内など)。レンダリング方法は、小道具と州の純粋な機能でなければなりません。コンストラクタの副作用はアンチパターンですが、私は実際にここに状態を変更していないよ勘違いので、私はこれを取得していますなぜ私はかどうか分からない場合を除き、 `componentWillMount

に移動させることができます。警告。私は比較的反応が早いので、何かが間違っているか間違っている可能性が高いです。

ご協力いただければ幸いです。

編集:私は問題なくそれをで残しますが、子供たちへの呼び出しを削除することができますので、

buildTabs() { 
    var result = []; 
    var tabPanelID = this.props.tabPanelID; 
    // Create a tab for each tab in the props 
    for(var i = 0; i < this.props.tabs.length; i++) { 
     result.push 
     (
      <Tab tabPanelID={this.props.tabPanelID} bare={this.props.tabs[i].bare} key={i} target={this.props.tabs[i].target} 
       active={this.props.panelState.tabPanes[tabPanelID] ? 
        (this.props.panelState.tabPanes[tabPanelID].activeTarget === this.props.tabs[i].target) : 
        this.props.tabs[i].target == this.props.defaultTarget} 
        additionalClasses={this.props.additionalTabClasses}> 
       {this.props.tabs[i].contents} 
      </Tab> 
     ) 
    } 
    return result; 
} 

私は単にその前に含まれていませんでした。思っていたもののために、ここでbuildTabs(の内容)です。 mapは警告を削除します。

+0

'buildTabs'メソッドでsetState()を呼び出そうとしていますか? – Pcriulan

+0

ええ、私は、この 'buildTabs()'で何が起こっていると言っているのだろうか? – John

+0

レビューのためにこのコードを追加しました。編集で述べたように、警告を出さずに残しておくことができるので、私はそれを以前には含めなかった。 –

答えて

0

これは、ジェネリックタブペインがreduxイベントをそのコンストラクタにディスパッチすることによって発生していることがわかります。タブペインが使用されている他のコンテキストで警告がなぜ発生しなかったのか分かりません。なぜそれが早く見つからないのですか?

ディスパッチをcomponentWillMount()に移動しましたが、問題は解決されました。

関連する問題