数组jsx中没有迭代的项目

Question

I'm going insane over this problem. The map iteration does not iterate over the items. It render the {this.props.data.length} correct. I get '1' in this case. No errors or anything in the console. The console.log prints the object and it contains all the data.

var Component = React.createClass({
    render: function(){
        var data = this.props.data;

        if(data == null) {
            return (<p>...</p>)
        }
        if(data.information == null) {
            data.information = {informations: []};
        }
        if(data.technicalData == null){ 
            data.technicalData=[];
        }

        if(data.suppliers == null)  {
            data.suppliers = [];
        } else {
            console.log(data.suppliers);
        }

        return (
         <div className="row">
             <h1 className="page-header">{data.name}</h1>
             <div className="col-md-3">
                 <Information info={data.information.informations}/>
             </div>
             <div className="col-md-3">
                 <TechInfo tech={data.technicalData}/>
            </div>
            <div className="col-md-3">
                <Supplier data={data.suppliers}/>
            </div>
         </div>
         );
    }
});

var Supplier = React.createClass({
    render: function() {
      return (
            <div className="row">
                <h2>Supplier</h2>
                Number of suppliers: {this.props.data.length}
                {this.props.data.map(function(item, i){
                    <p>Supplier index: {i}</p>
                })}
            </div>
        )
    }
});

suppliers: [
  { name: "elfa",
    attributes: [
      { key: "artnr",
        value: "58-578-83"
      },
      { key: "url",
        value: "https://www.elfa.se"
      }
    ]
  }

Answer 1

You're not returning anything from inside the map . Add a return statement:

{this.props.data.map(function(item, i){
  return <p>Supplier index: {i}</p>;
})}