javascript - 空对象从无处传递到 Prop 上

Question

我在 React 上传递 Prop ，在某些时候，我在它们上面得到了一个空对象。这是一个问题，因为我必须使用 map 函数和“无法读取未定义的属性‘map’”。第一个日志来自父类，其他四个(应该是三个？)来自其子类。请忽略与 key 相关的错误。如果我不调用 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;

Prop console.log:

Answer 1

在您的 ThumbnailAreas 组件中添加了这行代码

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