使用 if 语句和 .map() 时渲染没有返回任何内容

Question

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

但是，这样做时，我得到

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>
    )
  }

看起来像这样的产品ID：

[ '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，我得到了预期的结果，没有未定义的结果。

这是我获取数据的方式：

Index.getInitialProps = async ({ req }) => {
    const categories = await fetch('http://localhost:3000/api/categories');
    const products = await fetch('http://localhost:3000/api/products');

    return {
        categories: await categories.json(),
        products: await products.json()
    };
};

所以我不确定我做错了什么。有什么想法吗？

完整错误：

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

Answer 1

尝试返回 null 而不是不返回任何内容

在 FormRow 中：

function FormRow({productIds}) {
  if(products && products.length > 0) {
    return 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>
        );
      } else {
        return null;
      }
    });
  } else {
    return null
  }
}

Answer 2

Emile 是对的。在 FormRow 代码段的第二行中，将单词 return 添加到该行的前面。

您的 return 用于地图，而不是渲染功能。

使用 if 语句和 .map() 时渲染没有返回任何内容

Nothing was returned from render when using if statement and .map()

javascript

reactjs

next.js