javascript - React 中 array.map 函数的返回值

Question

使用 React JSX，我有一个数组 levels，它可以包含一个或多个具有名称的级别的数组，例如:one、two 和三。在我的渲染函数中，我可以调用 {renderLevels} 来渲染由逗号分隔的所有级别。

这有效:

const renderLevels = levels.map((item, index) => {
      return (
         <Fragment key={index}>
            {(index ? ' & ' : '')} {item.name}
         </Fragment>
      )
   }
);

如果所有级别都存在，我想呈现“所有级别”，而不是逗号分隔的列表。在所有其他情况下，我想要该列表。所以我改变了我的代码。

这不起作用:

const renderLevels = () => {

   if (levels.length === 3) {
      return (
         'all levels'
      )
   }

   levels.map((item, index) => {
         return (
            <Fragment key={index}>
               {(index ? ' & ' : '')} {item.name}
            </Fragment>
         )
      }
   )
};

我的 const 现在是一个函数，然后我用 {renderLevels()} 调用。 问题:当级别少于 3 时，不再返回项目名称列表。我的 if 语句有效，并且 .map 内的 console.log(item.name) 确实会在级别少于 3 个的情况下向我显示结果。然而获取返回值却没有。我究竟做错了什么？

Answer 1

您缺少 levels.map() 的 return。目前，您只是在 if block 内返回该函数，但在 if 未执行时您没有返回任何内容。

const renderLevels = () => {

   if (levels.length === 3) {
      return (
         'all levels'
      )
   }

   return levels.map((item, index) => {
         return (
            <Fragment key={index}>
               {(index ? ' & ' : '')} {item.name}
            </Fragment>
         )
      }
   )
};