通过一个未定义的数组映射循环

React - Loop Through an Array - map of undefined

本文关键字：未定义 数组 映射 循环 一个      更新时间：2023-09-26

目的是在浏览器中显示图片，标题和描述。

数据在数组

customData.js 

import React, {Component} from 'react';
var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]
module.exports = DATA

这是我的Index.js

class App extends Component {

render() {
    return (
        <div>
            <MuiThemeProvider>
                <AppBarExampleIconButton />
            </MuiThemeProvider>
            <div>
                <Profile name={this.props.profileData.name} imgUrl={this.props.profileData.imgURL} descricao={this.props.profileData.descricao} />
            </div>
        </div>
    );
  }
}
ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));

这是我的Component profile.js

import React, {Component} from 'react';
import DATA from './customData.js';
var Profile = React.createClass({
render: function(){
    //console.log(DATA);
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
            </div>
        </div>
    )
  }
});
export default Profile

如果我console.log(DATA)我可以看到对象在我的控制台，但现在我不知道该怎么做，以显示数据在一个数组只有当数据是一个单一的对象。

有人能帮我吗?我已经尝试创建一个状态，不得到未定义，但我不理解，需要帮助!!

这是你想要的吗?http://codepen.io/PiotrBerebecki/pen/qaRNKy 

var DATA = [{    
name: 'John Smith',
imgURL: 'http://whiplash.org/imagens-n/temp11/1474940559.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{    
name: 'Hugo Seleiro',
imgURL: 'https://static.noticiasaominuto.com/stockimages/1370x587/naom_564bfb7bd7ee7.jpg',
descricao: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}]

class App extends React.Component {
  render() {  
    const data = this.props.profileData.map(function(item, index) {
      return (
        <Profile name={item.name} 
                 imgUrl={item.imgURL} 
                 descricao={item.descricao}
                 key={index} />
      );
    }); 
    return (
        <div>
            {data}
        </div>
    );
  }
}

class Profile extends React.Component {
  render() {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6 col-xs-12">
                    <img src={this.props.imgUrl} />
                </div>
                <div className="col-md-6 col-xs-12">
                    <h3>{this.props.name}</h3>
                    <p>{this.props.descricao}</p>
                </div>
             </div>
        </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.contentor'));
相关文章：