Tengo problemas cuando intento asignar un json a mi componente de reacción y no lo sé por ...

Esta es la estructura:

{
  "cards": [
    {
      "id": "1",
      "fares": [
        {
          "fareRef": "1",
          "prices": {
            "afterTax": 100
          }
        }
      ],
      "international": false,
    },
    {
      "id": "2",
      "fares": [
        {
          "fareRef": "1",
          "prices": {
            "afterTax": 200
          }
        }
      ],
      "international": false,
    },

  ]
}

Y dentro de mi componente estoy haciendo esto:

 cards.map(element => (
  <p>{element.id}</p> // works!
  <p>{element.fares.map(element => element.prices)}</p> // dosen 't work..
))

¡Gracias!

0
larry_82 28 oct. 2019 a las 21:29

4 respuestas

La mejor respuesta

No estoy seguro de cuál es el comportamiento deseado, pero en este momento, está tratando de representar un objeto (element.prices) como parte del elemento <p>. Suponiendo que está tratando de mostrar los valores afterTax, debe hacer referencia a la propiedad afterTax dentro de prices.

cards.map(element => (
  <p>{element.id}</p> // works!
  <p>{element.fares.map(element => element.prices.afterTax)}</p>
))
2
wentjun 28 oct. 2019 a las 18:41

Obtiene ese error porque está creando una nueva matriz de objetos de element.fares que se parece a [ { afterTax: 100 }, { afterTax: 200 }]. React no puede procesar esos objetos, por lo que escupe ese error. Si desea ver las tarifas, intente algo como:

cards.map(element => (
  <p>{element.id}</p>
  <p>{element.fares.map(element => element.prices.afterTax)}</p>
))

Obviamente, tendrá que formatearlo porque esto literalmente dará como resultado 100200 pero le dará una idea de lo que está mal.

0
Dillan Wilding 28 oct. 2019 a las 18:43

Esto se debe a que element.fares.prices en su segunda llamada de mapa resulta ser:

"prices": {
            "afterTax": 100
          }

Estás renderizando un objeto, que no está permitido. Prueba element.fares.prices.afterTax.

cards.map(card => (
  <p>{card.id}</p> // works!
  <p>{card.fares.map(fare => fare.prices.afterTax)}</p> // dosen 't work..
))
1
Chris B. 28 oct. 2019 a las 18:42
cards.map(card => (
  <p>{card.id}</p>
  <p>{card.fares.map(fare => fare.prices)}</p>
))

En general, debe evitar el uso de nombres de variables genéricas como element para etiquetar los elementos de un iterable para evitar conflictos de nombres como este.

Además, ¿querías renderizar un objeto? Porque fare.prices es un objeto. ¿Querías renderizar fare.prices.afterTax en su lugar? Si ese es el caso, entonces debería ser:

cards.map(card => (
  <p>{card.id}</p>
  <p>{card.fares.map(fare => fare.prices.afterTax)}</p>
))
0
mario_sunny 28 oct. 2019 a las 18:43