javascript: tengo problemas para lidiar con declaraciones condicionales dentro de React/JSX

Cerrado. Esta pregunta necesita detalles o claridad. Actualmente no acepta respuestas.

¿Quieres mejorar esta pregunta? Añade detalles y aclara el problema editando esta publicación.

Cerrado

hace 2 años

.

mejorar esta pregunta

Estoy intentando configurar correctamente declaraciones condicionales dentro de mi JSX. Ellos dictan si ciertos elementos deben aparecer en la pantalla o no.

Para profundizar en los detalles, aquí está mi fragmento de código. Tengo dos elementos, el <p> etiquetas y <Graph>. Me gustaría que el <p> etiquetas para que aparezcan cuando stockCount === 0. Cuando stockCount no es igual a 0, me gustaría que la etiqueta <graph> componente a mostrar, en lugar de los <p>'s

              <Grid>
              {(!stockCount || stockCount === 0) &&
                <p>
                    Your have zero stocks...
                </p>
                }
                {stockCount && stockCount > 0 &&
                  <Graph/>
                }
              </Grid>

No recibo ningún error con el que trabajar, así que estoy un poco confundido sobre por qué lo anterior no funciona.

¿Qué tipo de error tienes? ¿Error de lógica o error de compilación?

- Nghi Nguyen

27 de marzo de 2021 a las 3:58

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

Su código duplica las condiciones innecesariamente. Podrías simplificar tu código con una operación ternaria, como esta:

render() {
    return (
     <Grid>
       {
        !stockCount ? <p>You have zero stocks</p> : <Graph />
       }
     </Grid>
     )
  }

Tenga en cuenta también que no es necesario realizar pruebas de !stockCount || stockCount === 0 porque ambos evalúan valores falsos (indefinidos y 0), por lo que siempre devolverán falso. Por supuesto, en el caso de que estés tratando con valores numéricos y noSi desea que 0 sea un valor falso, debe escribir código para tenerlo en cuenta, pero no es necesario en este caso.

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

Simplemente puede verificar el recuento y aplicar el operador ternario.

<Grid>
{stockCount && stockCount > 0 ?
  <Graph/>:
    <p>
     Your have zero stocks...
    </p>
}
</Grid>