JSON 编码、解析和调用混淆

JSON encode, parsing and calling confusion

本文关键字：调用 编码 JSON      更新时间：2023-09-26

所以我的服务器向客户端发送了一个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为什么不起作用呢？

编辑：我发现如果我要做一个控制台.log就在 ajax 调用之后

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 是怎么回事？

这里没有足够的代码来查看为什么description[0]值undefined并且没有description属性。

创建HabitList时是否设置了属性？

<HabitList description=[{description: "Aaa"}]/>

尝试像这样运行代码以查看发生了什么

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

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

所以例如：如果您已经在 var1 中解析了 json，并且想要从 json 中获取"属性"键，则应使用 var1["property"] 。当然，假设"属性"键是第一级的！

所以我想出了问题所在。当您意识到组件DidMount在初始渲染发生之前不会运行时，这一点变得很清楚。所以一开始它把一个空数据传递给孩子。这就是为什么尽管 JSON 中有一个描述键，但我无法从数据中获取描述

的原因
相关文章：