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

Question

我正在搞亂反應並試圖解析並渲染一個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（）不是函數。

Answer 1

看來你的數據不是json對象，它是一個字符串。 您可能需要運行data = JSON.parse(data); 將您的數據轉換為實際的javascript對象以便能夠使用它。 一個簡單的測試就是運行

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

你應該注意到差異。

Answer 2

您將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')
);