[UPDATE]

Question

我尝试根据提交的表单制作的JSON响应创建表，因此初始渲染需要为空白，但这种空白状态被证明是一个问题。

问题进一步复杂，因为响应可能有不同的标题，列数和顺序。

父组件

这将获取resultData并将其传递给子组件

<ReportsTable title={this.props.title} resultData={this.state.resultData} />

子组件

var ReportsTable = React.createClass({
    render: function() {
        var resultData = this.props.resultData;

        return(
                <div>
                    <h3>{this.props.title}</h3>
                    <table>
                        <tr>
                            //iteration here
                        </tr>
                    </table>
                </div>
        )

    }
});

任何迭代尝试都会给我一个

未捕获的TypeError：无法读取未定义的属性XXX

收到的数据是这种格式

[Array[1], Array[1]]
    0: Array[1]
        0: Object
            family_name: "Sales"
            gross_margin: "0%"
            net_profit: "$0.00"
            profit_percent: "0%"
            quantity_on_hand: 2863
            retail: "$9,347.12"
            total_cost: "$7,615.96"
            total_sold: 49 
    1: Array[1]
        0: Object
            family_name: "Service"
            gross_margin: "0%"
            net_profit: "$0.00"
            profit_percent: "0%"
            quantity_on_hand: 147.5
            retail: "$939.05"
            total_cost: "$268.40"
            total_sold: 10.8

[UPDATE]

因此我们修改了服务器的响应，以便在Array中减少一个嵌套。但是现在我尝试的时候 resultData.map（function（item）{}）我得到一个＆＃34;未捕获的TypeError：undefined不是一个函数＆＃34;因为我试图映射对象的属性时出错。当我尝试通过数组映射时，它可以工作，所以我不认为这是我的语法。

最后，我的麻烦是遍历每个Object的属性。

这部分来自父作品

{resultData.map(function(tableRow, i) {
    return (
        <TableRow tableRow={tableRow} key={i} />
    );
})}

子组件中的这部分不是

var TableRow = React.createClass({
    render: function(){
        var tableRow = this.props.tableRow;
        console.log(tableRow);

        return(
                <tr key={tableRow}>
                    {tableRow.map(function(tableItem, i){
                        <td key={i}>{tableItem}</td>
                    })}
                </tr>
        );
    }
});

Answer 1

我遇到了同样的问题。

我得到“Uncaught TypeError：undefined不是函数”的原因是因为我试图使用map来迭代json对象的属性，这是不可能的。我的解决方案是使用Object.keys（）迭代json对象的键。请参阅下面的解决方案。

    Data: 
    {
        "status": {
            "build": {
                "a":"b",
                "c":"d"
            }
        }
    }   
       `render: function(){
            var buildInfo = this.props.applicationInfo.status.build;
            var properties = Object.keys(buildInfo).map((k, idx) => {
               return (
                 <p key={idx}><strong>{k}</strong> - {buildInfo[k]}</p>
               );
            });
            return(
                <div>
                    {properties}
                </div>
            );
        }`

Answer 2

如果你有JSON而不是Array并且你想在JSX中循环反应渲染函数使用Object.keys：

  <select className="form-control" >
   {Object.keys(item.unit).map(unit => {
      return <option value="1">1</option>
   })}
  </select>

Answer 3

所以这是有效的

<table className="table table-condensed table-striped">
    <thead>
        <tr>
            {resultTitles.map(function(title){
                var textAlignLeft = false;
                if(textLeftMatch.test(title)){
                     textAlignLeft = true;
                }
                title = title.replace(/_/g, " ");

                return <th key={title} className={textAlignLeft ? 'text-left' : ''}>{title}</th>
            })}
        </tr>
    </thead>
    <tbody>
        {resultData.map(function(tableRow, i) {
            return (
                <TableRow tableRow={tableRow} key={i} />
            );
        })}
    </tbody>
</table>

var TableRow = React.createClass({
    render: function(){
        var tableRow = this.props.tableRow;
        var rowArray = $.map(tableRow, function(value, index){
           return [value];
        });

        return(
                <tr key={tableRow}>
                    {rowArray.map(function(tableItem, i){
                        return <td key={i} className={(i === 0) ? 'text-left' : ''}>{tableItem}</td>
                    })}
                </tr>
        );
    }
});

但是，经过一段时间的搜索，我找到了一个更好的起点http://dynamictyped.github.io/Griddle/quickstart.html

通过JSX Render for React.js中的JSON响应进行迭代

父组件

子组件

[UPDATE]

这部分来自父作品

子组件中的这部分不是

3 个答案: