带有循环的jsx渲染错误：未定义元素

Question

I am trying to loop through obj in json format I get from hitting the api. However, when I try to render it, I kept running into the error that the element is not defined.

This is my comment template return to html:

    return (
      <div> 
        this.state.comments.map((comment)=> (
          {comment.owner}
          {comment.text}
        )
      </div>

    );

  }

This is what the json file looks like:

{
  "comments": [
    {
      "owner": "user1", 
      "owner_show_url": "/u/user1/", 
      "postid": 1, 
      "text": "text1"
    }, 
    {
      "owner": "user2", 
      "owner_show_url": "/u/user2/", 
      "postid": 1, 
      "text": "text2"
    }
  ], 
  "url": "/api/v1/p/1/comments/"
}

this is the error i copied from the developer tool:

bundle.js:1490 Uncaught ReferenceError: comment is not defined
    at Comments.render (bundle.js:1490)
    at finishClassComponent (bundle.js:7852)
    at updateClassComponent (bundle.js:7849)
    at beginWork (bundle.js:7945)
    at performUnitOfWork (bundle.js:8265)
    at workLoop (bundle.js:8289)
    at HTMLUnknownElement.callCallback (bundle.js:6267)
    at Object.invokeGuardedCallbackDev (bundle.js:6283)
    at invokeGuardedCallback (bundle.js:6222)
    at performWork (bundle.js:8325)

Answer 1

Could be that you need to wrap javascript within jsx using {}:

{this.state.comments.map()} 

you should also contain jsx within a parent component or a html tag (such I did here with the li as is standard when list building)

EDIT: I initialized comments state with 2 objects however your App should initialize state simply with an empty array:

state={
    comments:[]
 }

this should work (assuming your setState is being done properly):

 class SomeComponent extends React.Component{ state={ comments:[ {owner:'owner1', text:'comment2'}, {owner:'owner2', text:'comment2'} ] } render(){ return ( <ul> {this.state.comments.map((comment)=> { return <li> {comment.owner} - {comment.text} </li> })} </ul> ); } } ReactDOM.render( <SomeComponent />, document.getElementById("react") );

 <div id='react'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Where did you declare your state? Did you add the constructor to the code?

 this.state = {comments: new Comment()};

I also noticed that you missed some indentation. You need curly braces around this.state... and you also missed parentheses.

Answer 3

Check if you've declared state.

constructor() {
  this.state = { comments: [] }
}

Also, it would help to initialize it or at least assume an empty array if there are no values set to it yet

(this.state.comments || []).map(..)

And don't forget to wrap it with curly braces when inside the render function

{(this.state.comments || []).map(..)}