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

Question

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

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

在某些用例中，数组中的每个 object 的estado为2 ，因此它返回一个空数组，并且 map 什么也没有。 我想要的不是那种行为，而是呈现一个<MenuItem>Sin convocatorias</MenuItem> 。

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

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

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