Ошибка рендеринга jsx с циклом: элементы не определены

Question

Я пытаюсь перебрать obj в формате json, который я получаю от нажатия API. Однако, когда я пытался отобразить его, я продолжал сталкиваться с ошибкой, что элемент не определен.

Это мой шаблон комментария, возврат в html:

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

    );

  }

Вот как выглядит файл json:

{
  "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/"
}

это ошибка, которую я скопировал изинструмент разработчика:

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

Возможно, вам нужно обернуть javascript в jsx, используя {}:

{this.state.comments.map()} 

, вы также должны содержать jsx в родительском компоненте или html-теге (такое я сделал здесь с li, как стандартпри создании списка)

РЕДАКТИРОВАТЬ: я инициализировал состояние комментариев с 2 объектами, однако ваше приложение должно инициализировать состояние просто с пустым массивом:

state={
    comments:[]
 }

это должно работать (при условии, что ваш setState выполняетсядолжным образом):

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

Проверьте, объявили ли вы состояние.

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

Кроме того, это поможет инициализировать его или, по крайней мере, принять пустой массив, если для него еще не заданы значения

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

И не забудьте обернуть его фигурными скобками, когда внутри функции render

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

Answer 3

Где вы объявили свое государство? Вы добавили конструктор в код?

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

Я также заметил, что вы пропустили некоторые отступы. Вам нужны фигурные скобки вокруг this.state..., и вы также пропустили скобки.