Question

这是一段代码：

  render() {
    return (
        <div
            <div className="container-center">
                <div className="container-center-inner">

                    <div>
                        <div className="container-checkout">
                            <div>
                                <div className="container-cart">
                                {
                                    this.props.cartStore.items.forEach(function(item, i, arr) {


                                        return (
                                            <div className="basket-item" key={i}>
                                                <div>
                                                    <div className="basket-item-image">
                                                        <TShirt className="color-tshirt-small" width="130" height="176" images={item.cartItemTShirt.image} color={item.item.color} />
                                                    </div>

                                                </div>
                                            </div>
                                        )

                                    })
                                }
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    );
}

Container＆＃34; container-cart＆＃34;是空的，但this.props.cartStore.items有值，应该可以工作。当我在返回渲染之前尝试执行代码时，所有工作正常，但是当我将它放回时，它什么都不返回。我觉得循环中有问题，但我不知道，有什么帮助吗？

Answer 1

您的return语句中的第一个<div>缺少结束标记（>）。

我建议切割大量多余的标签或划分组件层次结构，以便将来更轻松地进行调试。

此外，惯例是使用map()而不是forEach()来返回array个组件。

请参阅下面的完整示例。

// Render.
render() {
  return (
    <div>
      <div className="container-center">
        <div className="container-center-inner">
          <div>
            <div className="container-checkout">
              <div>
                <div className="container-cart">
                  {this.props.cartStore.items.map((item, i, arr) => {
                    return (
                      <BasketItem item={item} i={i}/>
                    )
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// Basket Item.
const BasketItem = ({item, i, arr}) => (
  <div className="basket-item" key={i}>
    <div>
      <div className="basket-item-image">
          <TShirt className="color-tshirt-small" width="130" height="176" images={item.cartItemTShirt.image} color={item.item.color} />
      </div>
    </div>
  </div>
)

当我尝试在react.js中的render函数中循环数组时，它什么都没显示，为什么？

1 个答案: