我无法终生弄清楚为什么我会出错:
超过最大呼叫堆栈大小
运行此代码时。如果我注释掉:
const tabs = this.getTabs(breakpoints, panels, selectedTab);
错误消失了。我什setState()至已注释掉其他电话,以尝试缩小问题的出处。
setState()
代码(删除了额外的功能):
export default class SearchTabs extends Component { constructor() { super(); this.state = { filters: null, filter: null, isDropdownOpen: false, selectedFilter: null, }; this.getTabs = this.getTabs.bind(this); this.tabChanged = this.tabChanged.bind(this); this.setSelectedFilter = this.setSelectedFilter.bind(this); this.closeDropdown = this.closeDropdown.bind(this); this.openDropdown = this.openDropdown.bind(this); } componentDidMount() { const { panels } = this.props; if (!panels || !panels.members || panels.members.length === 0) { this.props.fetchSearch(); } } getTabs(breakpoints, panels, selectedTab) { const tabs = panels.member.map((panel, idx) => { const { id: panelId, headline } = panel; const url = getHeaderLogo(panel, 50); const item = url ? <img src={url} alt={headline} /> : headline; const classname = classNames([ searchResultsTheme.tabItem, (idx === selectedTab) ? searchResultsTheme.active : null, ]); this.setState({ filter: this.renderFilters( panel, breakpoints, this.setSelectedFilter, this.state.selectedFilter, this.state.isDropdownOpen, ) || null }); return ( <TabItem key={panelId} classname={`${classname} search-tab`} headline={headline} idx={idx} content={item} onclick={this.tabChanged(idx, headline)} /> ); }); return tabs; } render() { const { panels, selectedTab } = this.props; if (!panels || panels.length === 0) return null; const tabs = this.getTabs(breakpoints, panels, selectedTab); return ( <div className={searchResultsTheme.filters}> <ul className={`${searchResultsTheme.tabs} ft-search-tabs`}>{tabs}</ul> <div className={searchResultsTheme.dropdown}>{this.state.filter}</div> </div> ); } } export const TabItem = ({ classname, content, onclick, key }) => ( <li key={key} className={`${classname} tab-item`} onClick={onclick} >{content}</li> );
由于此循环:
render -----> getTabs -----> setState ----- ^ | | | |____________________________________________v
您正在从render调用getTabs方法,并setState在其中进行操作,setState将触发重新渲染,再次是getTabs ..... 无限循环 。
setState
setState从getTabs方法中删除,它将起作用。
getTabs
另一个问题在这里:
onclick={this.tabChanged(idx, headline)}
我们需要为onClick事件分配一个函数,我们不需要调用它,但是在这里您正在调用该方法,请使用以下方法:
onclick={() => this.tabChanged(idx, headline)}