Question

我正在创建一个带有标签和div的应用程序，以显示与标签相关联的iframe或div。我有一个导航菜单，当您单击其中一个菜单项时，会创建一个新标签，同时应创建一个div / iframe（如果适用），该菜单可以完美运行。在我的DivAndIframe类中创建div失败，当我尝试绘制Can not read property 'tabsDivIframe' of undefined时，它给出了此错误<DivAndIframe tabsDivIframe {this.props.divIframe.tabsDivIframe} />。这没有任何意义，因为在我的课程App中，数组是一个内容不会引发任何错误的数组。

class App extends Component {
    constructor(props, context){
        super(props, context);

        ["openTabs"].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            tabs:{
                tabsLi: [],    
            },
            divIframe:{
                tabsDivIframe: [],
            },
            showtabs: true,
        }
    }

    openTabs(e, url, iframe, trdtitle){
        e.preventDefault();

        //Change the state
        this.setState({
            showtabs: false,
        })
        //Creating tabs + iframe/div
        if (this.state.tabs.tabsLi.includes(trdtitle) === false){
            this.setState({
                tabs: { tabsLi:[...new Set(this.state.tabs.tabsLi),trdtitle].filter(function(el) { return el; })},
                divIframe: { tabsDivIframe:[...new Set(this.state.divIframe.tabsDivIframe),url].filter(function(el) { return el; })},
            }, () => {
                //this.state.divIframe.tabsDivIframe is an array
                console.log(this.state.tabs.tabsLi);console.log(this.state.divIframe.tabsDivIframe)
            })
        }
    }

    render(){
        return (
            <>
                <section className='section'>
                    <Tabs
                        navigation={this.state.navigation}
                        textvalue={this.state.textvalue}
                        showtabs={this.state.showtabs}
                        tabs={this.state.tabs}
                        tabsLi={this.state.tabs.tabsLi}
                        tabsDivIframe={this.state.divIframe.tabsDivIframe}
                        openTabs={this.openTabs}
                        removeTab={this.removeTab}
                    />
                </section>
            </>
        )
    }
}

class Tabs extends Component {
    render(){
        return(
            <div id="content-tabs" className="tabs">
            {( this.props.showtabs)  
                ? (
                    <>
                    <div className="waiting-leads">
                        <p>Parece que todavía no hay ningún lead...</p>
                        <h3>¡Ánimo, ya llega!</h3>
                        <img src={imgDinosaurio} alt="Dinosaurio"></img>
                    </div>
                    </>
                ) : (
                    <>
                        <ul id="resizable" className="content" >
                            <LiTabs 
                                tabsLi={this.props.tabs.tabsLi}
                                removeTab={this.props.removeTab}
                            />
                        </ul>
                        <DivAndIframe 
                            tabsDivIframe={this.props.divIframe.tabsDivIframe}
                        />
                    </>
            )}
            </div>
        );
    }
}

class LiTabs extends Component{
    render(){
        return(
            <>
            {this.props.tabsLi.map((value, index) =>
                <li key={index}>
                    <span>{value}</span>
                </li>
            )}
            </>
        );
    }
}

class DivAndIframe extends Component{
    render(){
        return(
            <>
            {this.props.tabsDivIframe.map((url, index) =>
                <div key={index}>
                    <span>Test {url}</span>
                </div>
            )}
            </>
        );
    }
}

我不明白为什么DivAndIframe与LiTabs完全相同时不起作用

Answer 1

我认为您有错字。

渲染Tabs时，在App中传递道具：

<Tabs
    navigation={this.state.navigation}
    textvalue={this.state.textvalue}
    showtabs={this.state.showtabs}
    tabs={this.state.tabs}
    tabsLi={this.state.tabs.tabsLi}
    tabsDivIframe={this.state.divIframe.tabsDivIframe}
    openTabs={this.openTabs}
    removeTab={this.removeTab}
/>

在Tabs内，您拥有：

<DivAndIframe 
    tabsDivIframe={this.props.divIframe.tabsDivIframe}
/>

您没有将divIframe传递给Tabs，这就是为什么您获得Can not read property 'tabsDivIframe' of undefined的原因。 this.props.divIframe是undefined。

也许应该是其他名字？

像this.props.tabsDivIframe吗？

无法读取未定义的属性'tabsDivIframe'-React

1 个答案: