javascript - 数组 jsx 中没有迭代项目

Question

我快被这个问题搞疯了。 map 迭代不会迭代项目。它使 {this.props.data.length} 正确。在这种情况下我得到“1”。控制台中没有错误或任何内容。 console.log 打印该对象并包含所有数据。

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

您不会从 map 内部返回任何内容。添加return语句:

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