React.js this.props.data.map（）不是函数 [英] React.js this.props.data.map() is not a function

问题描述

我正在乱搞反应并试图解析并渲染一个json对象。现在，我只是设置一个硬编码的对象进行测试，而不是从ajax调用中获取它。

I'm messing around with react and trying to parse and render a json object. Right now, I'm just setting it with a hard-coded object for testing and not getting it from an ajax call.

<script type="text/jsx">

var Person = React.createClass({
render: function() {
  return (
    <div>
      <p className="personName"></p>
      <p className="personSA1"></p>
      <p className="personSA2"></p>
      <p className="zip"></p>
      <p className="state"></p>
      <p className="country"></p>
    </div>
  );
 }
});

var PersonDiv = React.createClass({
render: function() {
  var personNodes = this.props.data.map(function(personData){
    return (
      <Person
        personName={personData.person.firstname}
        personSA1={personData.person.street1}
        personSA2={personData.person.street2}
        zip={personData.person.zip}
        state={personData.person.state}
        country={personData.person.country}>
      </Person>
    )
});
return (
  <div>
    {personNodes}
  </div>
);
}
});

React.render(
 <PersonDiv data={data} />,
document.getElementById('jsonData')
);

我用

<script>
  var data = "[" + '<%=data%>' + "]";
</script>

数据对象是我在portlet的java端创建的数据对象。我知道json是有效的，因为我可以使用JSON.parse（json）来解析和遍历字符串，但我一直认为map（）不是函数。

The data object is one that I'm creating on the java side of a portlet. I know that the json is valid, because I can use JSON.parse(json) to parse and traverse the string, but I keep getting that map() is not a function.

推荐答案

看来您的数据不是json对象，而是一个字符串。您可能需要运行 data = JSON.parse（data）; 将数据转换为实际的javascript对象才能使用它。一个简单的测试就是运行

It appears that your data is not a json object, it is a string. You probably need to run data = JSON.parse(data); to convert your data into an actual javascript object to be able to use it. An easy test for this would be to run

<script>
  var data = "[" + '<%=data%>' + "]";
  console.log(data);
  console.log(JSON.parse(data));
</script>

你应该注意到差异。

这篇关于React.js this.props.data.map（）不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！