0
votes

Les objets ne sont pas valides en tant qu'enfant React - mes données JSON sont-elles incorrectes?

Je sais que cela a été demandé à plusieurs reprises sur Stack Overflow, mais d'autres solutions ne semblent pas fonctionner pour moi.

J'essaie d'accéder aux notifications de ce fichier JSON.

Mon fichier JSON: https://dinkyapp.000webhostapp.com/db.json

Mon fichier JSON est-il mal structuré? Je sais que c'est assez gros. Dans le monde en dehors de React, le fichier JSON fonctionne correctement. Mais dans React, c'est irréalisable, peu importe si j'analyse, convertis en tableaux, etc. Dois-je créer plusieurs fichiers plus petits à la place?

Dans mon exemple, j'essaye d'accéder aux notifications et de les renvoyer dans le JSX.

J'obtiens l'erreur "Les objets ne sont pas valides en tant qu'enfant React". Je reçois également notifs.map n'est pas une fonction. Cela est probablement dû au fait que les données extraites ne sont pas au format tableau.

Mon code de composant:

import React, { useState, useEffect } from 'react';
    import axios from 'axios';

    const GetData = () => {
 
    
    let [notifs, setNotifs] = useState([]);

    useEffect(() => {
      axios.get('db.json').then((res) => {
        var data = res.data.clients.clientID_1.notifications;
        setNotifs(data);
        

      });
    }, []);

    const getIDs = 
        notifs.map(item => {
            return (
            <p key={notifs.reqID}>{notifs.text}</p>
            )
        })
    

    return <div>{getIDs}</div>;
    };

    export default GetData;

Je suis sur le point de revenir à Vanilla JS car j'ai essayé de nombreuses façons. Mais je pense que mes données JSON sont peut-être médiocres. Si quelqu'un pouvait nous le conseiller?

Merci beaucoup

javascript reactjs json arrays

1 commentaires

vous essayez d'utiliser notifs à la fois comme tableau lorsque vous mappez et comme objet lorsque vous utilisez . notation

3 Réponses :

0
votes

Essayez de le remplacer par ceci:

<p key={item.reqID}>{item.text}</p>

0 commentaires

0
votes

Si vous regardez https://dinkyapp.000webhostapp.com/db.json res.data.clients.clientID_1.notifications c'est un objet comme:

const getIDs = Object.keys(notifs).map(key => {
    return (
        <p key={key}>
            From {key}
            {notifs[key].map(n => (
                <p key={n.reqID}>{n.text}</p>
            ))}
        </p>
    );
});

Pas un tableau, vous devez donc l'utiliser comme un objet, exemple:

const notifs = {
    userID_1: [
        {
            timestamp: 1613777053000,
            reqID: 100012,
            seen: true,
            text: 'Aaron F accepted your shift swap',
        },
    ],
    userID_2: [
        {
            timestamp: 1614676200000,
            reqID: 199290,
            seen: true,
            text: 'Sean W approved your Annual Leave request',
        },
        {
            timestamp: 1610719942000,
            reqID: 184828,
            seen: true,
            text: 'Sean W approved your Annual Leave request',
        },
    ],
};

0 commentaires

1
votes

c'est parce que vous essayez de mapper sur des objets, pour simplifier votre JSON pourrait être

"notifications": [
   {
     "user_id": 1 // move user id here
     "timestamp": 1613777053000,
     "reqID": 100012,
     "seen": true,
     "text": "Aaron F accepted your shift swap"
   },
   {
     "user_id": 2, // move user id here
     "timestamp": 1613777053000,
     "reqID": 100012,
     "seen": true,
     "text": "Aaron F accepted your shift swap"
}]

alors vous mappez maintenant en toute sécurité

0 commentaires