React.js this.props.data.map（）不是函数

我搞砸了反应，试图解析和呈现json对象。现在，我只是用一个硬编码的对象进行测试，而不是通过ajax调用。React.js this.props.data.map（）不是函数

<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（）不是函数。

来源

2015-02-10 jordaniac89

将'console.log（）'放在'this.props ...'之前会发生什么？ – 2015-02-10 15:04:35

你逝去的结果console.log作为第一个参数React.render：

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

它应该是这样的：

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

来源

2015-02-10 15:06:02 nilgun

对不起。我编辑了我的代码。在我遇到此问题以尝试调试后，我在代码中放入了console.log。 – jordaniac89 2015-02-10 15:07:00

你可以在同一个地方登录数据'console.log（data）'吗？ – nilgun 2015-02-10 15:08:21

如果'data'是一个有效数组，它应该可以工作：http://jsfiddle.net/ge26hgpq/ – nilgun 2015-02-10 15:11:00

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

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

你应该注意到不同之处。

来源

2015-02-10 16:17:50 Butters

React.js this.props.data.map（）不是函数

回答

相关问题