通過具有已知鍵名的prop訪問數據react js

Question

剛開始學習React JS時，我遇到了一堵磚牆。

我目前有兩個組件（可能是錯誤的方法）。

• 戰利品盒
  • 戰利品表

LootBox通過ajax調用json文件，LootTable需要訪問此數據。

這是我當前的代碼。

var LootBox = React.createClass({
                loadLootFromServer: function() {
                    $.ajax({
                      url: this.props.url,
                      dataType: 'json',
                      cache: false,
                      success: function(data) {
                        this.setState({
                            data: data
                        });
                      }.bind(this),
                      error: function(xhr, status, err) {
                        console.error(this.props.url, status, err.toString());
                      }.bind(this)
                    });
                },
                getInitialState: function() {
                    return {data: []};
                },
                componentDidMount: function() {
                    this.loadLootFromServer();
                },
                render: function () {
                    return (
                        <LootTable data={this.state.data} />
                    )
                } 
            });

戰利品表

var LootTable = React.createClass({

                render: function () {
                    return (
                        <div className="table-responsive">
                            <table className="table table-bordered table-hover">
                                <tr>
                                    <th>Head <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Neck <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td>{this.props.data.head.id}</td>
                                    <td>{this.props.data.neck.id}</td>
                                </tr>
                                <tr>
                                    <th>Shoulder <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Chest <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Waist <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Legs <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Feet <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Wrist <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Gloves <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Back <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Ring 1 <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Ring 2 <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Trinket 1 <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Trinket 2 <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>Main Hand <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                    <th>Off Hand <span className="glyphicon glyphicon-th-list pull-right"></span></th>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
                    )
                }
            });

渲染

React.render(
                <LootBox url="http://127.0.0.1:3001/loot.json" />,
                document.getElementById('content')
            );

JSON格式

[
    {
      "main_hand": {
        "id": 113937,
        "bonus": "449"
      },
      "off_hand": {
        "id": 113960,
        "bonus": "449"
      },
      "head": {
        "id": 119321,
        "bonus": "449"
      },
      "neck": {
        "id": 113890,
        "bonus": "449"
      },
      "shoulders": {
        "id": 119322,
        "bonus": "449"
      },
      "back": {
        "id": 113878,
        "bonus": "449"
      },
      "chest": {
        "id": null,
        "bonus": "None"
      },
      "wrist": {
        "id": 113935,
        "bonus": "449"
      },
      "hands": {
        "id": 119319,
        "bonus": "449"
      },
      "waist": {
        "id": 113964,
        "bonus": "449"
      },
      "legs": {
        "id": 119320,
        "bonus": "449"
      },
      "feet": {
        "id": 113895,
        "bonus": "449"
      },
      "finger1": {
        "id": 113901,
        "bonus": "449"
      },
      "finger2": {
        "id": null,
        "bonus": "None"
      },
      "trinket1": {
        "id": 113889,
        "bonus": "449"
      },
      "trinket2": {
        "id": 113986,
        "bonus": "449"
      }
    }
]

我不完全確定自己在做什么錯，因為嘗試訪問LootBox上的道具時（例如this.props.data.head.id），我收到TypeError: undefined is not an object (evaluating 'this.props.data.head.id') 。

任何人有理論嗎？

編輯 ：將console.log添加到成功函數后，我將由此返回。

[Log] [ (loot, line 10)
Object
back: Object
bonus: "449"
id: 113878
__proto__: Object
chest: Object
feet: Object
finger1: Object
finger2: Object
hands: Object
head: Object
legs: Object
main_hand: Object
neck: Object
off_hand: Object
shoulders: Object
trinket1: Object
trinket2: Object
waist: Object
wrist: Object
__proto__: Object
]

Answer 1

出現此TypeError的原因是因為LootBox組件上data的初始狀態是一個空數組。 這將在初始渲染時傳遞到LootTable。 這意味着LootTable的初始呈現this.props.data上的this.props.data是一個空數組，並且它試圖訪問一個空數組上的head鍵，但未能成功，從而導致TypeError。

一種可能的解決方案是在嘗試訪問其鍵之前檢查空數組。 像這樣：

var LootTable = React.createClass({
    render: function () {
    var headID = this.props.data.head.id == null ? "Default value" : this.props.data.head.id;
    var neckID = this.props.data.neck.is == null ? "Default value" : this.props.data.neck.id;
        return (
            <snip>
        )
    }
});

然后，您只需使用創建的變量而不是JSX中的props。

Answer 2

ajax調用是否返回您發布的數組？

如果是這樣，則需要執行此操作this.props.data[0].head.id

Answer 3

您的初始渲染（在componentDidMount之前）將沒有任何數據，因此您的LootTable組件將針對一個空數組工作，這將不起作用。