使用 if 语句和 .map()

Question

我正在尝试返回一个组件，该组件仅在特定类别中才应呈现。我从服务器获取的类别对象有一个 product_id 列表。我将 product_ids 列表传递给组件并检查它是否在列表中，如果在，则返回它。

但是，这样做时，我得到

FormRow(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

// index.js (Every other function will be in this function as well)

export default function Index({ products, categories }) {

    const classes = useStyles();

    const theme = useTheme();

    return (

        <div id="page-container">

            ...

                            <div id="products">

                { products && categories && <FormTabComponent/>  }

                            </div>

                    ...

        </div>

    );

}

所以我正在尝试加载<FormTabComponent/>并确保产品和类别都存在。假设这也意味着它检查对象是否也不是空的。

因此 FormTabComponent 将呈现以下组件，看起来它呈现得很好。

  function FormTabComponent() {

    return(

      <SwipeableViews>

      <TabContainer dir={theme.direction}>

          {categories.map((category, key) => (

            <Grid key={key} container spacing={1}>

              <FormRow productIds={category.product_ids}/>

            </Grid>

          ))} 

        <Grid container spacing={1}>

          <FormRow />

        </Grid>

      </TabContainer>

    </SwipeableViews>

    )

  }

看起来像这样的 productIds：

[ 'b2c66a6d', '9e303f69', 'cd210ce7', '436ce49c' ]

这是问题所在的 FormRow。

function FormRow({ productIds }) {

products.map((product, key) => {

  if (!_.isEmpty(productIds) && productIds.includes(product.id)) {

    return (

      <React.Fragment>

          <Grid key={key} item xs={4}>

            <Paper className={classes.paper}>

              <Item

                id={product.id}

                title={product.title}

                description={product.description}

                currency={product.currency}

                price={product.price}

              />

            </Paper>

          </Grid>

      </React.Fragment>

    );

  }

});

}

如果我 console.log productIds，我得到预期的结果，没有未定义的结果。

所以我不确定我在这里做错了什么。有任何想法吗？