javascript React.js this.props.data.map() 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28434789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js this.props.data.map() is not a function
提问by jordaniac89
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.
我正在处理 react 并试图解析和呈现一个 json 对象。现在，我只是使用硬编码对象设置它以进行测试，而不是从 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. 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.
数据对象是我在 portlet 的 java 端创建的对象。我知道 json 是有效的，因为我可以使用 JSON.parse(json) 来解析和遍历字符串，但我一直认为 map() 不是函数。
回答by Butters
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
看来你的数据不是一个json对象，它是一个字符串。您可能需要运行data = JSON.parse(data);将数据转换为实际的 javascript 对象才能使用它。对此的一个简单测试是运行
<script>
var data = "[" + '<%=data%>' + "]";
console.log(data);
console.log(JSON.parse(data));
</script>
You should notice the difference.
你应该注意到不同之处。
回答by nilgun
You are passing result of console.logas 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')
);
