Question

我有一个文件，其中包含许多我所有页面中都包含的常见相关组件。该文件中有一个名为Tabs的组件类，该组件类仅具有渲染功能和应该提供的许多道具。

在我从未使用过此组件的页面上，我遇到一个错误，该错误与未在其render函数中为该组件设置道具有关。我在其他组件上调用setState()之后的某个时刻会发生这种情况。根据dev-tools的错误和React跟踪是：

Uncaught TypeError: Cannot read property 'length' of undefined

The above error occurred in the <Tabs> component:

    at Tabs (<anonymous>:331:9)
    at EventList (<anonymous>:147:9)
    at div
    at EventListPage (<anonymous>:23:9)

对于上下文，EventListPage有一个EventList，并且都没有Tabs。在其他类似的页面上，我得到的错误基本上相同，但是这些页面的组件而不是EventList出现了错误。另外，如果之前提到的话，我之前提到的setState()调用也属于EventListPage类。

我一生都无法弄清楚如何或为什么可以调用该组件的render函数，因为这些页面上的任何地方都没有引用或实例化该组件本身，尤其是在错误跟踪的组件内部也没有引用/实例化该组件是说它来自Tabs类之前。

我知道React在setState()之后为需要更新的组件保留了某种内部列表，这个未使用的组件是否有可能进入了该列表？我该怎么做才能解决此问题或找到问题的根源？

标签：

class Tabs extends React.Component{
    static idInc = 1;

    render(){
        let headers = [];
        let bodies = [];
        for(let i = 0; i < this.props.headerLabels.length; i++){
            const h = this.props.headerLabels[i];
            const b = this.props.bodies[i];
            const id = (this.props.customId ? this.props.customId : 'tabs' + ++Tabs.idInc) + '-' + i;
            const active = (this.props.activeTab == i || this.props.activeTab == h) ? ' active' : '';
            headers.push(
                <li key={h} className="nav-item">
                    <a className={'nav-link' + active} href={'#' + id} data-toggle="tab">{h}</a>
                </li>
            );
            bodies.push(
                <div key={id} id={id} className={'tab-pane' + active}>{b}</div>
            );
        }
        return(
            <div>
                <ol className="nav nav-tabs">{headers}</ol>
                <div className="tab-content">{bodies}</div>
            </div>
        );
    }
}

Answer 1

在devtools兔子漏洞的深处，我发现在我的“普通”文件中，我以某种方式用Tabs类覆盖了“ Table”名称，因此当我在页面中导入Table时，它试图呈现一个Tabs 。愚蠢的错误，尽管简单，却很难找到。

反应：在setState（）之后，为不在页面上的组件调用渲染函数

1 个答案: