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

我搞砸了反應，試圖解析和呈現json對象。現在，我只是用一個硬編碼的對象進行測試，而不是通過ajax調用。React.js this.props.data.map（）不是函數

<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（）不是函數。

來源

2015-02-10 jordaniac89

將'console.log（）'放在'this.props ...'之前會發生什麼？ – 2015-02-10 15:04:35

你逝去的結果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') 
);

來源

2015-02-10 15:06:02 nilgun

對不起。我編輯了我的代碼。在我遇到此問題以嘗試調試後，我在代碼中放入了console.log。 – jordaniac89 2015-02-10 15:07:00

你可以在同一個地方登錄數據'console.log（data）'嗎？ – nilgun 2015-02-10 15:08:21

如果'data'是一個有效數組，它應該可以工作：http://jsfiddle.net/ge26hgpq/ – nilgun 2015-02-10 15:11:00

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

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

你應該注意到不同之處。

來源

2015-02-10 16:17:50 Butters

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

回答

相關問題