在 React.js 的 JSX Render 中迭代 JSON 响应

Question

我正在尝试根据提交表单制定的 JSON 响应创建 table，因此初始渲染需要为空白，但事实证明这种空白状态是个问题.

由于响应可能有不同的 headers、列数和顺序，问题变得更加复杂。

Parent分量

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

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

Child分量

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>
        )

    }
});

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

未捕获类型错误：无法读取未定义的属性 XXX

收到的数据是这种格式

[Array[1], Array[1]]
    0: Array[1]
        0: Object
            family_name: "Sales"
            gross_margin: "0%"
            net_profit: "[=14=].00"
            profit_percent: "0%"
            quantity_on_hand: 2863
            retail: ",347.12"
            total_cost: ",615.96"
            total_sold: 49 
    1: Array[1]
        0: Object
            family_name: "Service"
            gross_margin: "0%"
            net_profit: "[=14=].00"
            profit_percent: "0%"
            quantity_on_hand: 147.5
            retail: "9.05"
            total_cost: "8.40"
            total_sold: 10.8

[更新]

所以我们修改了服务器的响应，这样我在数组中就少了一个嵌套。但是现在当我尝试 resultData.map(函数(项目){}) 当我试图通过 Object 的属性进行映射时，出现 "Uncaught TypeError: undefined is not a function" 错误。当我尝试通过数组进行映射时，它起作用了，所以我认为这不是我的语法。

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

这部分来自 parent 作品

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

Child 组件中的这部分没有

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

所以这行得通

<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

Answer 2

我遇到了同样的问题。

我得到 "Uncaught TypeError: undefined is not a function" 的原因是因为我试图使用地图迭代 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 3

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

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

在 React.js 的 JSX Render 中迭代 JSON 响应

Iterating through a JSON response in JSX Render for React.js

javascript

json

reactjs

react-jsx

Parent分量

Child分量

[更新]

这部分来自 parent 作品

Child 组件中的这部分没有