如何使用 React hook 的 useState 将具有嵌套对象的对象数组存储为属性？

Question

I am fetching an array of Expense objects that contains 2 objects with as attributes that contain their own set of objects as attributes. This is what it looks like:

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

Now I want to iterate through the response array and add them my hook's data variable and have attempted to do accordingly:

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

and lastly, here is what my schema looks like:

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?"
  }
};

When I run this, I get the following error: Unhandled promise rejection: TypeError: Invalid attempt to spread non-iterable instance

How do I get around this?

EDIT: I know one options is the access the object attributes and store them in a stringified form, but I'd prefer not to hack my way around this. I was suggested to use useReducer but I am new to Hooks and havn't yet figured out how a reducer would solve this. If this is the way, an example would be greatly appreciated.

Answer 1

Disregard my previous response, this is because you're storing an object in your data variable, but you are treating it as an array when you try to spread it.

I'd recommend storing the expenses array in its own separate piece of state, seeing as you currently have no other data there.

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

Should fix your problem. And then replace data.expenses.map with data.map and writeData(result.data) with writeData(result.data.expenses) .

All together:

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