在 JSX Render for React.js 中遍历 JSON 响应

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

本文关键字：遍历 JSON 响应 js React JSX Render for      更新时间：2023-09-26

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

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

父组件

这将获取结果数据并将其传递给子组件 

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

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

未捕获的类型错误： 无法读取未定义的属性 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

[更新]

所以我们修改了来自服务器的响应，以便我在数组中少了一个嵌套。但是现在当我尝试时 resultData.map（function（item） { }）并且当我尝试映射对象的属性时，我收到"未捕获的类型错误：未定义不是函数"错误。当我尝试通过数组映射时，它可以工作，所以我认为这不是我的语法。

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

父作品的这部分

{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>
        );
    }
});

我遇到了同样的问题。

我之所以得到"未捕获的类型错误：未定义不是一个函数"，是因为我试图使用 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>
            );
        }`

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

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

所以这有效

<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

相关文章：