javascript - 无法弄清楚如何使用{this.props.etc}，尤其是React.js中的map

var Order = React.createClass({
  loadOrderFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        console.log(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.loadOrderFromServer();
      setInterval(this.loadOrderFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        <div className="orderInformationTable">
        <table>
          <thead>
            <tr>
              <th width="200">General Info</th>
              <th> </th>
            </tr>
         </thead>
         <tbody>
           <OrderInformationTable order={this.state.data.order} />
         </tbody>
       </table>
       </div>
      );
     }
   });



var OrderInformationTable = React.createClass({
  render: function() {

 var orderInfo = this.props.order.map(function (info) {
   return (
     <tr>
       <td>{info.attribute}</td>
       <td>{info.value}</td>
     </tr>
   )
 });

  return (
    <div className="orderInfoTableContents">
      {orderInfo}
    </div>
  );
 }
});

    React.render(
    <Order url="api_url" pollInterval={2000} />,
    document.getElementById('order')
    );

//来自api的数据格式如下

{
"order":[
  {"attribute":"id","value":2066},
  {"attribute":"name","value":"John D."},
  {"attribute":"location","value":"USA"},
],
"pieces":[
{"id":2,"type":"Diamond Ring","status":null,
  "items":[
  {"id":3,"type":"setting","style":"solitaire"},
  {"id":2,"type":"setting","style":"style 3"}  ],
"tasks":[
  {"number":1,"task":"order diamond","description":"for diamond 43","status":"in progress"}  ]
} <-- end of a single "piece"
] <-- end of array of "pieces"
}

我得到的错误是：
TypeError：this.props.order未定义

我使用所有对象都是道具的静态虚拟数据成功完成了此操作，但是现在我正在使用状态，它无法正常工作，而且我无法弄清错误。

另外，我可以访问OrderInformationTable中的this.props.order来显示它，但是我无法执行任何操作。因此，我不确定我是否了解该对象的本质。而且我确定api和this.state.data中的数据正确。预先感谢任何可以阐明这一点的人！

最佳答案

就像我在评论中说的那样，OrderInformationTable是在ajax请求完成之前呈现的，这导致在开始时没有任何道具蜂声传递给该子组件。

解决此问题的一种方法是：

var OrderInformationTable = React.createClass({
  render: function() {
  var orderInfo;
  if (this.props.order) {

    orderInfo = this.props.order.map(function (info) {
      return (
        <tr>
          <td>{info.attribute}</td>
          <td>{info.value}</td>
        </tr>
      )
    });
  }
  return (
    <div className="orderInfoTableContents">
      {orderInfo}
    </div>
  );
 }
});

它是这样工作的：
-React Components具有lifecycles。您在执行代码时所要做的就是等待组件被挂载，然后启动ajax请求（顾名思义）是异步的。
那么会发生什么呢？
好吧，您的组件已安装，并且此时data中没有state，因此您不会向OrderInformationTable发送任何内容，因此当您尝试通过map进入this.props.order时，会出现错误，因为此处存在此点不是this.props.order。如果避免此错误，则可以通过检查是否定义了this.props.order或其他任何避免该错误的方法来确保安全，因为在ajax请求完成后，您将得到data，您的状态将传递给OrderInformationTable通过props，您的组件将更新并呈现您的新内容。

希望这能把您清除。