Как сохранить массив объектов с вложенными объектами в качестве атрибутов, используя useState реагирующего хука?

Question

Я получаю массив объектов Expense, который содержит 2 объекта в качестве атрибутов, которые содержат их собственный набор объектов в качестве атрибутов.Вот как это выглядит:

{
"expenses": [
    {
        "id": "5b996064dfd5b783915112f5",
        "amount": {
            "value": "1854.99",
            "currency": "EUR"
        },
        "date": "2018-09-10T02:11:29.184Z",
        "merchant": "Burger King",
        "receipts": [],
        "comment": "",
        "category": "",
        "user": {
            "first": "Vic",
            "last": "Rob",
            "email": "Vic@rob.com"
        },
        "index": 0
    },
    {
        "id": "5b99606474ab17b7820b3922",
        "amount": {
            "value": "3222.88",
            "currency": "GBP"
        },
        "date": "2018-08-13T07:11:01.680Z",
        "merchant": "McD",
        "receipts": [],
        "comment": "",
        "category": "",
        "user": {
            "first": "craig",
            "last": "Michael",
            "email": "craig@craig.com"
        },
        "index": 1
    },
]

Теперь я хочу перебрать массив ответов и добавить к ним переменную данных моего крючка и попытался сделать соответственно:

  const [data, setData] = useState({expenses:[]});
 const Realm = require("realm");
useEffect(() => {
const fetchData = async () => {
  const result = await axios(
   'http://localhost:3000/expenses?limit=10&offset=0',
  );
  writeData(result.data)
};
fetchData();
}, []);

const writeData = data =>{
Realm.open({
schema: [ExpenseSchema, UserSchema, AmountSchema]
}).then(realm => {
realm.write(() => {
  data.expenses.map((expense) => {
    realm.create ('expense',expense)
   setData ([...data, expense]);  //returns an error. same if i use Object.values(expense)
   console.log (expense)
    });
});
});
} 

и, наконец,Вот как выглядит моя схема:

const AmountSchema = {
 name: "amount",
properties: {
value: "string",
currency: "string"
}
};

    const UserSchema = {
  name: "user",
  properties: {
    first: "string",
    last: "string",
    email: "string"
  }
};
const ExpenseSchema = {
  name: "expense",
  primaryKey: "id",
  properties: {
    id: "string",
    amount: "amount?",
    user: "user?",
    date: "date",
    merchant: "string",
    receipt: "data?"
  }
};

Когда я ее запускаю, я получаю следующую ошибку: Отклонение необработанного обещания: TypeError: Недопустимая попытка распространения не повторяемого экземпляра

Как мне обойти это?

РЕДАКТИРОВАТЬ: Я знаю, что один из вариантов - это доступ к атрибутам объекта и сохранение их в строковой форме, но я бы предпочел не взламывать этот способ.Мне предложили использовать useReducer, но я новичок в Hooks и еще не выяснил, как это решит редуктор.Если это так, пример будет принята с благодарностью.

Answer 1

Не обращайте внимания на мой предыдущий ответ, это потому, что вы храните объект в вашей переменной data, но вы рассматриваете его как массив , когда пытаетесь распространить его.

Я бы порекомендовал хранить массив расходов в отдельном состоянии, поскольку у вас в данный момент нет других данных.

const [data, setData] = useState([]);

Должно решить вашу проблему.А затем замените data.expenses.map на data.map и writeData(result.data) на writeData(result.data.expenses).

Все вместе:

const [data, setData] = useState([]);
const Realm = require("realm");
useEffect(() => {
  const fetchData = async () => {
    const result = await axios(
        'http://localhost:3000/expenses?limit=10&offset=0',
    );
    writeData(result.data.expenses)
  };
  fetchData();
}, []);

const writeData = data =>{
  Realm.open({
    schema: [ExpenseSchema, UserSchema, AmountSchema]
  }).then(realm => {
    realm.write(() => {
      data.map((expense) => {
        realm.create ('expense',expense)
        setData ([...data, expense]);  //returns an error. same if i use Object.values(expense)
        console.log (expense)
      });
    });
  });
}