Question

我有一个名为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进行外部渲染之前进行过滤）

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

使用array.filter（）。map（）返回jsx而不是空数组

2 个答案: