React中的Javascript函数：为什么我的函数不返回多个div？

Question

我想回复一个＆＃39; hi＆＃39; div，对于给定对象内的每个项目和密钥对。所以当我在对象中有2对时，我想返回2个div。但是，我只得到1 div返回。为什么会这样？我错过了一些非常明显的事情，我现在还没有做好吗？我怎样才能返回超过1个div？

这是功能：

createList() {
        for(let chosenBook in this.props.updateBasket.productMap) {
            return <div>hi</div>
        }
    }

Answer 1

如果遇到for loop语句，

return将退出。您需要的是map而不是object keys并返回结果。

createList() {
        return Object.keys(this.props.updateBasket.productMap).map(key => {
            return <div>hi</div>
        });
    }

Answer 2

for(let chosenBook in this.props.updateBasket.productMap) {  //wrong syntax
                    return <div>hi</div>
      }

使用of，而不是in

  for(let chosenBook of this.props.updateBasket.productMap) {  //correct syntax
                return <div>hi</div>
  }