React.jsthis.props.data.map(）不是函数

React.js this.props.data.map() is not a function

本文关键字：函数 map jsthis props data React      更新时间：2023-09-26

我正在处理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')
);

我正在用设置数据变量

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

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

您的数据似乎不是json对象，而是字符串。您可能需要运行data = JSON.parse(data);将数据转换为实际的javascript对象才能使用它

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

你应该注意到区别。

您正在将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')
);
相关文章：