javascript - jsx 循环渲染错误 : elements not defined

Question

我正在尝试以 json 格式循环访问 obj，这是通过调用 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()} 

您还应该在父组件或 html 标记中包含 jsx(我在这里使用 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>