ReactJS 和复杂的 JSON 对象答案

【问题标题】：ReactJS and complex JSON objectReactJS 和复杂的 JSON 对象
【发布时间】：2014-04-12 06:47:38
【问题描述】：

我遵循了 ReactJS 教程，这很容易完成更复杂的事情。

在我的例子中，我想使用一个复杂的 JSON 对象，它包含一个映射、一个单一的值、一个列表等......这是代码：

    var NotificationStatus = React.createClass({
    loadNotificationsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
          console.log(this.state.data.notificationType);
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: {}};
    },
    componentWillMount: function() {
      this.loadNotificationsFromServer();
      setInterval(this.loadNotificationsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        <div>
          <li className="dropdown-menu-title">
              <span>You have {this.state.data.notificationCount} notifications</span>            
          </li>
          <Notifications data={this.state.data.notificationType} />
        </div>  
      );
    }
  });



  var Notifications = React.createClass({
    render: function() {
      var notificationNodes = this.props.data.map(function (notif, index) {
        return <Notification key={index}>{notif.type}</Notification>;
      });
      return <li>{notificationNodes}</li>;
      }
  });

  var Notification = React.createClass({
    render: function() {
      return (
        <a href="#">
              <span className="icon blue"><i className={this.props.children == "user" ? 'icon-user' : 'icon-comment-alt'}></i></span>
              <span className="message">{this.props.children}</span>           
              <span className="time">1 min</span>
          </a>
      );
    }
  });

  React.renderComponent(
    <NotificationStatus url="/data/notifications.json" pollInterval={2000} />,
    document.getElementById('notificationbar')
  );

这是来自 JSON 的示例：

    {
    "notificationCount": "1",
    "notificationType": [
       {
         "type": "update",
         "text": "New Update"
       },
       {
          "type": "user",
          "text": "New User"
       }
     ]
    }

当我尝试获取 notificationType 时，此时会出现错误“this.props.data is undefined”

    var notificationNodes = this.props.data.map(function (notif, index) {

我真的看不出声明有什么问题，当我在 ajax 级别获取 JSON 时，我确实有一张地图（通过 console.log 验证）。

任何帮助都会很棒。

非常感谢。

【问题讨论】：

标签： javascript json reactjs

【解决方案1】：

当您的组件首次呈现时，NotificationStatus 的 this.state.data 将为 {}，因为这是从 getInitialState 返回的内容。这意味着当你渲染时

<Notifications data={this.state.data.notificationType} />

您正在传递{}.notificationType 或undefined：

<Notifications data={undefined} />

因此，当 Notifications 首次呈现时，this.props.data 不是列表。这取决于您的应用程序，这里的正确修复是什么，但也许您想使用 data: null 进行初始化并将其添加到 NotificationStatus 的渲染方法的顶部：

if (!this.state.data) {
    return <div>Loading...</div>;
}

【讨论】：

【解决方案2】：

除了 Ben 的观点之外，您还在 componentWillMount 中调用 loadNotificationsFromServer。您应该调用 loadNotificationsFromServer 并在 componentDidMount 内启动任何计时器，因为您的组件尚未安装在 DOM 中。你可以在这里阅读更多：React Component Lifecycle

回顾代码，我不完全确定您的对象图应该是什么样子，但在一个地方，您似乎正在尝试迭代一组通知，而在另一个地方则迭代单个通知。

为了缓解 Ben 提到的问题，您还可以使用 notificationType 和 count（'' 和 0）的默认值来初始化您的状态作为快速修复，但逻辑运算符也可以工作。

【讨论】：