遍历reactjs中的对象

Question

我试图在我的 reactjs 中迭代一个对象但是有问题。 它不显示任何内容。

这是小提琴 -

http://jsfiddle.net/8e039Ltw/

Reactjs 代码：-

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        items: {'male':20, 'female':40}      
    }
  }

  render() {
    return (
      <div>
        {Object.entries(this.state.items).map(([key, value])=>{
                    <li>{key}</li>                    
                })
            }

      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Answer 1

jsx 中缺少 return。

像下面这样改变你的渲染方法，

render() {
    return (
      <div>
        { 
          Object.entries(this.state.items)
            .map(([key, val]) => {
              return <li key={key}>{key}: {val}</li>
            })
        }
      </div>
    )
}

Answer 2

您需要返回值：

Object.entries(this.state.items).map(([key, value])=>{
    return <li>{key}</li>                    
})

当您将地图包裹在{和}中时，您需要返回一些东西。 这是一个功能。 当您使用“单行”函数时，您可以省略 return 语句：

Object.entries(this.state.items).map(([key, value]) => <li>{key}</li>)