Question

我通过道具反应，在某些时候，我得到一个空物体。这是一个问题，因为我将不得不使用map函数和“无法读取未定义的属性'map'”。第一个日志来自父类，其他四个（应该是三个？）来自其子类。请忽略与密钥相关的错误。如果我不调用TabsArea组件，我不会收到此错误，但这不是解决方案。

我的app.js：

import React, {Component} from 'react';

import Modelo3d from './Modelo3d/Modelo3d'
import Options from './Options/Options';
import ThumbnailAreas from './ThumbnailArea/ThumbnailAreas';
import ThumbnailArea from './ThumbnailArea/ThumbnailArea';
import TabsArea from './TabsArea/TabsArea';

    import 'bulma/css/bulma.css'
    import './App.css';

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

            this.state = {

                activeTab: 'Tab 1',

                thumbnails: [
                    {
                        tituloThumbnail: 'Costas',
                        texturas: ['A', 'B', 'C', 'D'],
                    },
                    {
                        tituloThumbnail: 'Pernas',
                        texturas: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
                    },
                    {
                        tituloThumbnail: 'Pés',
                        texturas: ['A', 'B'],
                    }
                ],

                tabs: [
                    {
                        tituloTab: 'Tab 1',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3', 'Colecao 4', 'Colecao 5', 'Colecao 6', 'Colecao 7', 'Colecao 8'],
                    },
                    {
                        tituloTab: 'Tab 2',
                        colecoes: ['Colecao 1'],
                    },
                    {
                        tituloTab: 'Tab 3',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3'],
                    },
                    {
                        tituloTab: 'Tab 4',
                        colecoes: ['Colecao 1', 'Colecao 2', 'Colecao 3', 'Colecao 4'],
                    }
                ]
            };
        }

        changeActiveTab(tab) {
            this.setState({activeTab: tab});
        }

        activeTabContent() {
            const activeIndex = this.state.tabs.findIndex((tab) => {
                return tab.tituloTab === this.state.activeTab;
            });

            return this.state.tabs[activeIndex].colecoes;
        }

        render() {

            return (
                <div className={"container is-fluid"}>

                    <section>
                        <Modelo3d/>
                        <hr className={"line"}/>
                    </section>

                    <section>
                        <Options>

                            <ThumbnailAreas thumbnailAreas={this.state.thumbnails}
                            />

                            <hr className={"line"}/>

                            <TabsArea
                                activeTab={this.state.activeTab}
                                tabList={this.state.tabs}
                                changeActiveTab={this.changeActiveTab.bind(this)}
                                key={this.state.activeTab}
                                colecoes={this.activeTabContent()}/>

                        </Options>
                    </section>
                </div>
            );
        }
    }

    export default App;

道具console.log：

Answer 1

你的ThumbnailAreas组件中的

添加了这行代码

if(!this.props.thumbnails){
  return <div>loading</div>
}
return(
// your map function goes here this.props.thumbnails.map(item=>.......
)

从不知名的地方传递道具的空物体

1 个答案: