Объекты недопустимы как дочерние объекты React - мои данные JSON неверны?

Question

Я знаю, что об этом несколько раз спрашивали в Stack Overflow, но другие решения, похоже, у меня не работают.

Я пытаюсь получить доступ к уведомлениям в этом JSON файле.

Мой JSON файл: https://dinkyapp.000webhostapp.com/db.json

Это мой JSON файл плохо структурирован? Я знаю, что он довольно большой. В мире за пределами React файл JSON работает нормально. Но в React это не работает, независимо от того, разбираю ли я, конвертирую в массивы et c. Должен ли я вместо этого сделать несколько файлов меньшего размера?

В моем примере я пытаюсь получить доступ к уведомлениям и вернуть их в JSX.

Я получаю сообщение об ошибке «Объекты недействительны как дочерние объекты React». Я также получаю notifs.map - это не функция. Предположительно это связано с тем, что передаваемые данные не имеют формат массива.

Код моего компонента:

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;

Я почти собираюсь вернуться к Vanilla JS, поскольку я пробовал много способов. Но я думаю, что мои данные JSON плохие. Если кто-нибудь может посоветовать, пожалуйста?

Большое спасибо

Answer 1

это потому, что вы пытаетесь нанести на карту объекты, для упрощения ваш JSON может быть

"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"
}]

, тогда теперь вы можете безопасно отображать

Answer 2

Если посмотреть на https://dinkyapp.000webhostapp.com/db.json res.data.clients.clientID_1.notifications, это объект типа:

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',
        },
    ],
};

Не массив, поэтому вам нужно работать с ним как с объектом, например:

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>
    );
});

Answer 3

Попробуйте изменить его на это:

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