超出最大调用堆栈大小 - 连接的 React 组件

IT技术 javascript reactjs ecmascript-6
2021-04-16 21:48:04

我一生都无法弄清楚为什么会出现错误:

超出最大调用堆栈大小

运行此代码时。如果我注释掉:

const tabs = this.getTabs(breakpoints, panels, selectedTab);

错误消失了。我什至评论了其他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>
);
1个回答

因为这个循环:

  render  ----->   getTabs  ----->  setState -----
    ^                                            |
    |                                            |
    |____________________________________________v

您正在从渲染调用 getTabs 方法,并setState在其中执行,setState将触发重新渲染,再次 getTabs ..... Infinite loop

setStategetTabs方法中删除,它将起作用。

另一个问题在这里:

onclick={this.tabChanged(idx, headline)}

我们需要为 onClick 事件分配一个函数,我们不需要调用它,但是这里您正在调用该方法,请使用:

onclick={() => this.tabChanged(idx, headline)}
如果我们在渲染中执行 setState 代码将不起作用,它始终会抛出错误:“超出最大调用堆栈大小”:)
2021-05-22 21:48:04
不是这样,我试过在 getTabs 中注释掉 setState,没有什么区别
2021-05-28 21:48:04
我注释掉了 <TabItem /> 然后它就消失了......嗯
2021-06-07 21:48:04
在这种情况下,在componentWillMount 中执行此操作,如果需要,您也可以禁用它,请检查如何禁用
2021-06-08 21:48:04
您也可以调用该函数并返回 TabItems,但不要执行 setState,重新排列代码并在其他地方执行 setState,例如在 componentDidMount 生命周期方法中或在任何事件中。
2021-06-15 21:48:04