使用 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，我得到预期的结果，没有未定义的结果。所以我不确定我在这里做错了什么。有任何想法吗？