如何使用反应钩子的 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": "[e-mail]"        },        "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": "[e-mail]"        },        "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)    });});});} 当我运行它时，我收到以下错误：未处理的承诺拒绝：类型错误：传播不可迭代实例的无效尝试我该如何解决这个问题？编辑： 我知道一个选项是访问对象属性并将它们以字符串化的形式存储，但我不想绕过这个。有人建议我使用 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)

      });

    });

  });

}