J'ai du mal à comprendre pourquoi un appel res.json dans mon application envoie des données (un objet de commande), mais lorsque j'essaie d'accéder à un élément de ces données (res.data._id) et de le stocker dans une variable, je l'obtiens comme non défini . Je sais que cette donnée existe puisque console.log montre la valeur _id de l'objet de commande, mais console.logging cette pièce particulière renvoie undefined. Qu'est-ce qui cause ce comportement?

Logique backend:

router.post("/new", function(req, res) {
    const productInfo = req.body.productInfo;
    let order = new Order();
    order.product = {
        _id: productInfo.id,
        name: productInfo.name,
        description: productInfo.description,
        price: productInfo.price,
        quantity: productInfo.quantity
    }
    order.status = "Created";
    order.total = productInfo.price * productInfo.quantity;
    order.owner = {
        id: req.body.id,
        username: req.body.username
    }
    order.save().then(order => {
        res.status(200).json(`Order created successfully! Created order details: ${order}`);
    }).catch(err => {
        console.log("Order create error: ", err.message);
    });
});

Logique frontend:

let orderID = "";
return (
    <PayPalButton
          createOrder={(data, actions) => {
            axios.post("http://localhost:4000/orders/new",
                {productInfo, userID, username}
            ).then((res) => {
                if(res.status === 200) {
                    console.log(res.data);
                    console.log(res.data._id)
                    orderID = res.data._id;
                }
            }).catch((err) => {
                console.log(err);
            });
            return actions.order.create({
              purchase_units: [{
                amount: {
                  currency_code: "USD",
                  value: props.amount
                }
              }]
            })
          }}
     />
)

Réponse de console.log:

Order created successfully! Created order details: { product:
   { _id: '5e68330c8dcfa56868f1d23a',
     name: 'Birdhouse',
     description: 'A beautiful birdhouse',
     price: 5,
     quantity: 2 },
  owner: { username: 'tgoandrex' },
  createdAt: 2020-04-12T23:04:46.286Z,
  _id: 5e93a16eb1cbc837d80167ef,
  status: 'Created',
  total: 10,
  __v: 0 }
undefined
-1
Andrex 13 avril 2020 à 02:57

2 réponses

Meilleure réponse

axios s'attend à ce que le point de terminaison renvoie un objet JSON, mais vous envoyez une chaîne au client:

res.status(200).json(`Order created successfully! Created order details: ${order}`);

Tenter d'accéder à res.data sur le client vous donnera la chaîne littérale

"Order created successfully! Created order details: [elided]"

Mais comme il s'agit d'une chaîne, la propriété _id n'existe pas dessus, et donc elle retournera undefined.

Pour que cela fonctionne, vous devez envoyer uniquement l'objet, plutôt qu'une chaîne:

res.status(200).json(order);
4
Dan 13 avril 2020 à 00:01

Votre point de terminaison /orders/new ne répond pas avec JSON mais avec une simple chaîne. La méthode Response#json d'Express attend un objet qui sera sérialisé en JSON, pas une chaîne.

Vous devez simplement passer votre commande comme argument unique à la méthode json:

res.status(200).json(order);

Sinon, votre application React ne pourra pas analyser le JSON car ce n'est pas un format JSON valide.

2
Noé Lebrun 13 avril 2020 à 00:04