使用地图功能后无法获取道具

Question

我有一个反应应用程序，它是由：app.js 与状态传递道具到另一个类“ThumbnailAreas”，我使用地图功能在单个“ThumbnailArea”上分配道​​具。在这个常量“ThumbnailArea”中，我有两个元素：“ThumbnailTitle”和“ThumbnailGroup”。在“ThumbnailGroup”中，我有另一个地图功能来创建道具传递的缩略图，但我得到“无法读取未定义的属性'地图'”。

我认为问题出在第一个地图功能上，因为我在其中有“ThumbnailTitle”和“ThumbnailArea”，它会多次在“ThumbnailArea”上运行，但我无法解决。

当我在“ThumbnailGroup”中 console.log “console.log(this.props.texturas)”时，我得到了这个：

这是我的状态：

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']
                },
                {
                    tituloThumbnail: 'Porta',
                    texturas: ['A', 'B', 'C', 'D', 'E', 'F']
                },
            ],

            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'],
                }
            ]
        };
    }

我的 ThumbnailsAreas.js

import React from 'react';
import {Component} from 'react';

import ThumbnailArea from './ThumbnailArea';

import './ThumbnailAreas.css';

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

    }

    render() {

        return (
            <div className={["section", "thumbnailAreas"].join(' ')}>

                {this.props.thumbnailAreas.map(thumbnailArea => {
                        return <ThumbnailArea
                            titulo={thumbnailArea.tituloThumbnail}
                            texturas={thumbnailArea.texturas}
                        />
                    }
                )
                }

            </div>
        );
    }
}

export default ThumbnailAreas;

ThumbnailArea.js

import ThumbnailTitle from './ThumbnailTitle';
import ThumbnailGroup from './ThumbnailGroup';

const ThumbnailArea = (props) => (

    <div>
        <ThumbnailTitle
            titulo={props.titulo}
        />

        <ThumbnailGroup
            texturas={props.texturas}
        />

    </div>
);
export default ThumbnailArea;

thumbnailGroup.js

import Thumbnail from './Thumbnail';

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

    }

    render() {

        return (
            <div className={["column", "group"].join(' ')}>

                {
                    this.props.texturas.map(thumbnail => {
                            return <Thumbnail
                                textura={thumbnail}/>
                        }
                    )
                }
            </div>
        );
    }
}

export default ThumbnailGroup;

它应该看起来像这样（缩略图是硬编码的，应该与“texturas”的数量匹配）：

来自“ThumbnailAreas”的道具的console.log

Answer 1

如果您将整个state 直接传递给ThumbnailAreas，那么您访问props 的方式似乎不正确

{this.props.thumbnailAreas.map(thumbnailArea => {
        return <ThumbnailArea
            titulo={thumbnailArea.tituloThumbnail}
            texturas={thumbnailArea.texturas}
        />
    }
)}

要进行调试，我建议在 render 方法中使用 console.log props，或者您可以安装 react chrome extension，这样您就可以访问 state 和 props 来渲染每个组件。