Question

我有一个反应应用程序，由：app.js，状态传递道具到另一个类＆＃34; ThumbnailAreas＆＃34;我使用map函数在单个＆＃34; ThumbnailArea＆＃34;上分发道具。在这个＆＃34; ThumbnailArea＆＃34;，这是一个const，我有两个元素：a＆＃34; ThumbnailTitle＆＃34;和＃34; ThumbnailGroup＆＃34;。在＆＃34; ThumbnailGroup＆＃34;我在另一个地方有另一个地图功能来创建道具传递的缩略图，但我得到了＃34;无法读取属性＆＃39; map＆＃39;未定义＆＃34;。

我认为问题是由于第一个地图功能，因为我有两个＆＃34; ThumbnailTitle＆＃34;和＆＃34; ThumbnailArea＆＃34;在它内部，它将在＆＃34; ThumbnailArea＆＃34;多次，但我无法解决它。

当我在console.log＆＃34; console.log（this.props.texturas）＆＃34;在我的＆＃34; ThumbnailGroup＆＃34;我明白了：

这是我的状态：

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;

它应该看起来像这样（缩略图是硬编码的，应该匹配＆＃34; texturas＆＃34的数量;）：

来自＆＃34; ThumbnailAreas＆＃34;

的道具的console.log

Answer 1

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

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

要进行调试，我建议使用console.log方法中的props render，或者安装react chrome extension，以便您访问state＆amp;每个呈现的组件都props。

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

1 个答案: