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>

Объект данных - это объект, который я создаю на стороне 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')
);