[英]React.js this.props.data.map() is not a function
I'm messing around with react and trying to parse and render a json object. 我正在搞乱反应并试图解析并渲染一个json对象。 Right now, I'm just setting it with a hard-coded object for testing and not getting it from an ajax call.
现在,我只是设置一个硬编码的对象进行测试,而不是从ajax调用中获取它。
<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')
);
I'm setting the data variable with 我正在设置数据变量
<script>
var data = "[" + '<%=data%>' + "]";
</script>
The data object is one that I'm creating on the java side of a portlet. 数据对象是我在portlet的java端创建的对象。 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是有效的,因为我可以使用JSON.parse(json)来解析和遍历字符串,但我一直认为map()不是函数。
It appears that your data is not a json object, it is a string. 看来你的数据不是json对象,它是一个字符串。 You probably need to run
data = JSON.parse(data);
您可能需要运行
data = JSON.parse(data);
to convert your data into an actual javascript object to be able to use it. 将您的数据转换为实际的javascript对象以便能够使用它。 An easy test for this would be to run
一个简单的测试就是运行
<script>
var data = "[" + '<%=data%>' + "]";
console.log(data);
console.log(JSON.parse(data));
</script>
You should notice the difference. 你应该注意到差异。
You are passing result of console.log
as first parameter to React.render
: 您将
console.log
结果作为第一个参数传递给React.render
:
React.render(
console.log("inside render"),
<PersonDiv data={data} />,
document.getElementById('jsonData')
);
It should be like: 应该是这样的:
console.log("will render");
React.render(
<PersonDiv data={data} />,
document.getElementById('jsonData')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.