reactjs - logo - No se puede leer la propiedad ''map'' de undefined

react logo

Question

Estoy siguiendo el tutorial de reactjs, y sigo encontrándose con un problema al pasar el valor del estado de un componente a otro componente. El error ''No se puede leer la propiedad'' mapa ''de indefinido'' se genera cuando se ejecuta la función de mapa en el componente CommentList. ¿Qué haría que el accesorio no se definiera al pasar de CommentBox a CommentList?

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment){
        return (
          <div>
            <h1>{comment.author} </h1>
          </div>
        );
      });
      return (
        <div className="commentList">
          {commentNodes}
        </div>
      );
    }
  });

  var CommentBox = React.createClass({
    getInitialState: function(){
      return {data: []};
    },
    getComments: function(){
      $.ajax({
        url: this.props.url,
        dataType: ''json'',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });
    },
    componentWillMount: function(){
      this.getComments()
    },
    render: function(){
      return (
        <div className="commentBox">
          {/*this.state.data.comments*/}
          {<CommentList data={this.state.data.comments}/>}
        </div>
      );
    }
  });

  React.renderComponent(
    <CommentBox url="comments.json" />,
    document.getElementById(''content'')
  );

Answer 1

Creo que olvidaste cambiar

data={this.props.data}

a

data={this.state.data}

en la función de renderización de CommentBox. Cometí el mismo error cuando estaba siguiendo el tutorial. Por lo tanto, toda la función de renderizado debería verse como

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.state.data} />
      <CommentForm />
    </div>
  );
}

en lugar de

render: function() {
  return (
    <div className="commentBox">
      <h1>Comments</h1>
      <CommentList data={this.props.data} />
      <CommentForm />
    </div>
  );

Answer 2

Debes poner los datos antes de renderizar

Debería ser así:

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

React.render(
  <CommentBox data={data}/>,
  document.getElementById(''content'')
);

En lugar de esto:

React.render(
  <CommentBox data={data}/>,
  document.getElementById(''content'')
);

var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

Answer 3

En primer lugar, establezca datos iniciales más seguros:

getInitialState : function() {
    return {data: {comments:[]}};
},

Y asegúrate de tus datos ajax.

Debería funcionar si sigue las dos instrucciones anteriores, como Demo.

Actualizado: puede simplemente envolver el bloque .map con instrucción condicional.

if (this.props.data) {
  var commentNodes = this.props.data.map(function (comment){
      return (
        <div>
          <h1>{comment.author}</h1>
        </div>
      );
  });
}