私は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は警告を削除します。
'buildTabs'メソッドでsetState()を呼び出そうとしていますか? – Pcriulan
ええ、私は、この 'buildTabs()'で何が起こっていると言っているのだろうか? – John
レビューのためにこのコードを追加しました。編集で述べたように、警告を出さずに残しておくことができるので、私はそれを以前には含めなかった。 –