javascript: ¿Alternativa a .map en jsx para iterar?

Estoy usando esto en mi jsx:

 {item.result && item.result.length
                  ? item.result.map((sale, i) => (sale.month === 1 ? <span key={i}>{sale.itemCount}</span> : 0))
                  : 0}

Estoy intentando devolver sale.itemCount si existe, & sale.month = 1. O devuelva solo el 0.

Debido al efecto del mapa, cuando se debe mostrar un 0, se muestra el número de 0 que el mapa tiene iteraciones, p. 000

¿Cómo puedo mostrar solo un 0 cuando la matriz de resultados no tiene contenido o el sale.month coincidente no existe en la matriz de resultados? El código también debe funcionar en jsx en línea.

Sospecho que el mapa no es el método correcto a utilizar.

Aquí hay dos ejemplos de la matriz de resultados:

result = [
    {
        "itemCount": 2,
        "month": 7
    },
    {
        "itemCount": -1,
        "month": 8
    },
    {
        "itemCount": 0,
        "month": 9
    }
]

result = []

Para una mejor comprensión, el código completo se puede ver aquí

He intentado llevar esto fuera de JSX y tengo esta función:

const searchResultDec = (item) => {
    if (item.result.length === 0) {
      return <span>0</span>; // returns 0 as expected
    }
    if (item.result.length !== 0) {
      item.result.forEach((result) => {
        if (result.month !== 12) {
          return <span>0</span>; // does not return anything
        }
        if (result.month === 12) {
          console.log(result.itemCount); // returns 1 for three items
          return <span>{result.itemCount}</span>; // does not return anything
        }
      });
    }
  };

Pero nuevamente tengo problemas para mostrarobteniendo los resultados esperados donde he observado "no devuelve nada".

Estoy intentando mostrar el resultado así:

<td>
    {searchResultDec(item)}
</td>

Y una matriz de resultados de ejemplo:

const result = [
    {
        "itemCount": 1,
        "month": 8
    },
    {
        "itemCount": 1,
        "month": 12
    }
]

No estoy seguro de lo que intentas lograr. Creo que tenemos un problema XY aquí. Lea esto: meta.stackexchange.com/questions/66377/what-is-the-xy-problem

– Krisztián Balla

26/03/2021 a las 21:14

Vale, lo siento, actualizaré mi pregunta.

-Darryl Morley

26/03/2021 a las 21:16

Entonces desea mostrar solo un número y el número debe ser el recuento de elementos de enero (mes 1) o el número cero. ¿Es correcto?

– Krisztián Balla

27 de marzo de 2021 a las 9:41

Has dado en el clavo. Estoy ejecutando esto cada mes para mostrar una tabla de resultados.

-Darryl Morley

27 de marzo de 2021 a las 10:26

------------------------------------

Siempre es una buena idea dividir el problema en partes independientes y luego juntarlas. Es posible que desee considerar y tratar siempre de respetar el principio de responsabilidad única. Si hace esto, escribirá un código mejor que el 90% de los programadores. Desafortunadamente, los humanos somos buenos mezclando piezas. :-)

Dicho esto, hay una lógica en su código que intentaobtenga el recuento de pedidos durante un mes. Entonces tiene sentido crear una función separada para esto:

const result = [
    {
        "itemCount": 2,
        "month": 7
    },
    {
        "itemCount": -1,
        "month": 8
    },
    {
        "itemCount": 0,
        "month": 9
    }
];

function getItemCountForMonth(orderSummary, month) {
    const monthOrder = orderSummary.find(o => o.month == month);
    return monthOrder ? monthOrder.itemCount : 0;
}

console.log(getItemCountForMonth(result, 7));
console.log(getItemCountForMonth(result, 8));
console.log(getItemCountForMonth(result, 9));
console.log(getItemCountForMonth(result, 10));

Ahora deberías poder llamar a esta función en tu JSX de la siguiente manera:

<td>
    {getItemCountForMonth(result, 1)}
</td>
<td>
    {getItemCountForMonth(result, 2)}
</td>
<td>
    {getItemCountForMonth(result, 3)}
</td>

Y así sucesivamente... Tal vez incluso cree un bucle para esto.

Array.map no es lo que necesita ya que creará una nueva matriz con una entrada para cada una de las entradas de su matriz original. Por eso se llama "mapa". Asigna una entrada a una nueva entrada.

1

1

Gracias por esto, yoIntentaremos tener en cuenta tus consejos.

-Darryl Morley

27/03/2021 a las 20:30

------------------------------------

Simplemente devuelve nulo en lugar de 0.

{
  item.result && item.result.length
    ? item.result.map((sale, i) =>
        sale.month === 1 ? (
          <span key={i}>{sale.itemCount}</span>
        ) : null,
      )
    : null
}

1

Sin embargo, necesito un 0. Editaré mi pregunta, lo siento.

-Darryl Morley

26/03/2021 a las 21:10

------------------------------------

Prueba esto:

{item?.result?.length
                  ? item.result.map((sale, i) => 
sale.month === 1? <span key={i}>{sale.itemCount}</span> :0))
                  : 0}

1

Esa es probablemente una mejor manera de configurar mi condición, pero no se muestra ningún 0 si no hay sale.itemCount.

-Darryl Morley

26/03/2021 a las 21:14