map（）返回未在react組件中呈現

Question

我正在嘗試使用JSON數據映射在第二個渲染中渲染數據。 我必須查看兩個對象才能找到匹配的product_ids

我在這里做錯了什么？

  { 
    this.props.productGroups.map((productGroup) => {
      return (
        <TabContainer key={productGroup.id}>
          <h3>{productGroup.title}</h3>

          {
            productGroup.product_ids.map((productId) => {
              this.props.products.map((product) => {
                if (product.id == productId) {
                  return (
                    <div>
                      test
                    </div>
                  )
                } else {
                  console.log('miss')
                }
              })
            })
          }

        </TabContainer>
      )
    }) 
  } 

在一個旁注中，我知道這是回調地獄，只是不確定如何重構它的最佳方法。

Answer 1

您的第一個.map（）在this.props....之前缺少返回this.props....

return this.props.products.map((product) => {

Answer 2

@BenSteward的答案是正確的。 請注意，有多種方法可以減少嵌套地圖。

一種方法是，不用遍歷product_ids並遍歷其中的products ，您可以遍歷products並檢查該product的id是否在指定的product_ids 退出 ：

（這是代碼的更干凈的版本， parenthesis和花braces更少）

{
  this.props.productGroups.map(productGroup => (
    <TabContainer key={productGroup.id}>
      <h3>{productGroup.title}</h3>

      {this.props.products.map(product => {
        if (productGroup.product_ids.includes(product.id)) { /* Note this line */
          return <div>test</div>
        }
        console.log('miss')
      })}
    </TabContainer>
  ))
}

我相信它的性能會更好，並且對您將來的自我也更容易理解。