Question

所以我的服务器发送一个json编码的数组到客户端。客户端使用JSON.parse，但是当我试图提取数据时我得到一个错误：TypeError: Cannot read property 'description' of undefined，但我确定描述是关键之一，因为运行：

它与reactjs有关吗？我的代码：

<script type="text/jsx">
/** @jsx React.DOM */
var HabitModel = React.createClass({
getInitialState: function(){
    return {
    data: [],
    pageAmount: 0
  };
},

componentDidMount: function(){
    this.serverRequest = $.get(this.props.source, {userid:123},      function(result){
    result = JSON.parse(result);
    this.setState({
      data: result,
      pageAmount: Math.ceil(result.length/4)
    });

  }.bind(this));
},

render: function() {
  return (
    <div>
      the habit is:
      <HabitList data={this.state.data} />
    </div>
  );
}
})

    var HabitList = React.createClass(
  {
    render: function(){
  return(
  { //error line here
    JSON.stringify(this.props.data[0].description)
   }
      )

}

  });

    React.render(
  <HabitModel source = "/health1/server/habit/user"/>,
  document.getElementById('myDiv')
    );
    </script>

错误在JSON.stringify(this.props.data[0].description)行如果我放this.props.data[0]它会很有效，它会输出如下的JSON：

{"habitid":"1","userid":"123","description":"go to the gym","startDate":"0000-00-00","goalDate":"0000-00-00"}

正如您所看到的，其中一个关键是描述。那么this.props.data[0].description怎么没有用呢？

编辑：我发现如果我在ajax调用之后立即执行console.log

componentDidMount: function(){
this.serverRequest = $.get(this.props.source, {userid:123},      function(result){
result = JSON.parse(result);

console.log(result[0].description); //ADDED LINE, this would work

this.setState({
  data: result,
  pageAmount: Math.ceil(result.length/4)
});

  }.bind(this));
},

这将认识到描述是关键之一。 reactjs发生了什么？

Answer 1

此处没有足够的代码来查看description[0]值undefined为何description并且没有HabitList属性的原因。

您是否在创建<HabitList description=[{description: "Aaa"}]/>时设置了属性？

var HabitList = React.createClass(
  {
    render: function () {
      return (
      <ul>
        {JSON.stringify(this.props.description)}
      </ul>
      )
    }
  })

尝试运行这样的代码，看看发生了什么

{{1}}

Answer 2

在JS中，您可以使用方括号[]访问已解析的JSON字符串的JSON属性。

所以例如：如果您在var1中解析了json，并且想要获得＆＃34;属性＆＃34;来自json的密钥，你应该使用var1["property"]。当然假设＆＃34;属性＆＃34;关键是第一级！

Answer 3

所以我想出了问题所在。当你意识到componentDidMount没有运行直到初始渲染发生时，它就变得清晰了。所以在开始时它将一个空数据传递给孩子。这就是为什么尽管JSON中有描述键，但我无法获取数据的描述

JSON编码，解析和调用混淆

3 个答案: