React.js this.props.data.map() 不是函数

IT技术 javascript html reactjs
2021-03-18 08:53:49

我正在处理 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() 不是函数。

2个回答

看来你的数据不是一个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')
);
对不起。我编辑了我的代码。在我遇到这个问题试图调试后，我把那个 console.log 放在代码中。
2021-05-01 08:53:49
你能console.log(data)在同一个地方记录数据吗？
2021-05-03 08:53:49
好的。我可能需要更仔细地查看 json。但是，是的，在渲染中使用 console.log() 也会导致错误。
2021-05-20 08:53:49
其它你可能感兴趣的问题
上一篇使用 Google Maps API 出现“Uncaught ReferenceError: google is not defined”错误 下一篇var let 可以，但 let let 不行吗？