使用 array.filter().map() 返回 jsx 而不是空数组答案

【问题标题】：Returning jsx instead of empty array with array.filter().map()使用 array.filter().map() 返回 jsx 而不是空数组
【发布时间】：2020-11-13 14:39:39
【问题描述】：

我有一个名为 convocatoriasGenerales 的对象数组，它为 React (Material-UI) 中的选择呈现选项：

{convocatoriasGenerales ? (
  convocatoriasGenerales
   .filter(
       (convocatoriaGeneral) =>
         convocatoriaGeneral.estado !== "2"
    )
    .map((convocatoriaGeneral, i) => (
       <MenuItem key={i} value={convocatoriaGeneral._id}>
          {convocatoriaGeneral.nombre}
       </MenuItem>
    ))
) : (
  <MenuItem>Sin convocatorias</MenuItem>
)}

在某些用例中，数组中的每个对象都有estado 和2，因此它返回一个空数组并且不映射任何内容。我想要的不是那种行为，而是呈现一个<MenuItem>Sin convocatorias</MenuItem>。

我怎样才能做到这一点？（如果可以在另一个 const 外部渲染之前不过滤）

【问题讨论】：

如果您想查看所有项目，只需在没有过滤器的情况下制作地图。在地图内，您可以应用检查 convocatoriaGeneral.estado === "2" 以返回 <MenuItem>Sin convocatorias</MenuItem> 或不

标签： javascript reactjs jsx

【解决方案1】：

如果你有，你可以通过将.filter(...) 添加到内联来实现它：

{convocatoriasGenerales && convocatoriasGenerales.filter((convocatoriaGeneral) => convocatoriaGeneral.estado !== "2").length ? (
  convocatoriasGenerales
   .filter(
       (convocatoriaGeneral) =>
         convocatoriaGeneral.estado !== "2"
    )
    .map((convocatoriaGeneral, i) => (
       <MenuItem key={i} value={convocatoriaGeneral._id}>
          {convocatoriaGeneral.nombre}
       </MenuItem>
    ))
) : (
  <MenuItem>Sin convocatorias</MenuItem>
)}

更好的是，您可以将过滤后的数组存储在一个变量中并渲染它，这将使您免于在渲染时对同一数组进行两次过滤：

const filteredConvocatoriasGenerales.filter((convocatoriaGeneral) => convocatoriaGeneral.estado !== "2")

 { filteredConvocatoriasGenerales.length ? (
  filteredConvocatoriasGenerales
  .map((convocatoriaGeneral, i) => (
       <MenuItem key={i} value={convocatoriaGeneral._id}>
          {convocatoriaGeneral.nombre}
       </MenuItem>
    ))
) : (
  <MenuItem>Sin convocatorias</MenuItem>
)}

【讨论】：

那么不如先过滤，再映射过滤后的const？我的主要目标是减少代码。感谢您的建议

【解决方案2】：

提前过滤会更干净，然后再使用过滤后的数组：

{
const filteredCGs = convocatoriasGenerales.filter(c => c.estado !== "2")

filteredCGs ? (
    filteredCGs.map((convocatoriaGeneral, i) => (
       <MenuItem key={i} value={convocatoriaGeneral._id}>
          {convocatoriaGeneral.nombre}
       </MenuItem>
    ))
) : (
    <MenuItem>Sin convocatorias</MenuItem>
)}

【讨论】：