无法在 ReactJS 中打印出对象

Question

我是 ReactJS 的新手。我想打印出状态对象中的图片和文字，但不知道为什么在系统没有显示任何错误的情况下它不起作用。以下是我的代码

import React, { Component } from 'react';

class Asgn6 extends Component {
  constructor(){
    super();
    this.state={
      content:[
        {srcImg:"../img/1.png", text:"Black"},
        {srcImg:"../img/2.png", text:"Blue"},
        {srcImg:"../img/3.png", text:"Green"}
      ]
    }
  }
  add=() => {

  }
  render() {
    return (
        <div>
        {this.state.content.map((obj, index)=> {
          return (
          <div key={index}>
          <img src={require(obj.srcImg)} alt={obj.text}/>
          <p>{obj.text}</p>
          </div>
          );
        })}
          );
        <button onClick={this.add}>Add</button>
        </div>



    );
  }

}

export default Asgn6;

Answer 1

<img src={obj.srcImg} alt={obj.text}/>

就这样做吧。

Answer 2

关于automatic semicolon insertion，您需要记住的第一条规则是将返回的任何内容保留在return 关键字之后的同一行。否则这个

return
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>

等价于

return;
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>

注意，return 后如何插入分号。

简单修复即可

return <div>
  <img src={require(obj.srcImg)} alt={obj.text}/>
  <p key={index}>{obj.text}</p>
</div>

或使用括号对您的退货进行分组：

return (
  <div>
    <img src={require(obj.srcImg)} alt={obj.text}/>
    <p key={index}>{obj.text}</p>
  </div>
)