如何让我的 flatList 将具有嵌套对象的 Array 对象作为 useState 的属性呈现？

Question

我想做以下事情： 1) 从 API 检索数据 2) 将其存储在本地 Realm 实例中 3) 拉取存储在领域中的对象数组并将数据分配给数据挂钩 4) 在平面列表中显示

请注意，该对象包含 2 个对象作为属性。

这是我的 JS 代码：

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

 const writeData = response => { //data contains the response 
Realm.open({
  schema: [ExpenseSchema, UserSchema, AmountSchema],inMemory: true
}).then(realm => {
  realm.write(() => {
    response.map(expense => {
        realm.create("expense", expense);
       setData(data => [...data, expense]); //1) works if I do this
    });
   const objects = realm.objects('expense');
   const values =Object.values(objects);
    //setData([values]); //2) this one doesn't work, nor any of the following attempts
//setData(data => [...data, values]);
  //  setData([values]);
    //setData(objects);
 //setData([objects] 
  });
});
};

第二个 setData 调用是我想要工作的调用，但是在进行 Realm 查询时对象数组的格式并没有被 flatlist 识别为数据源，并在尝试时抛出以下错误渲染：

TypeError: undefined is undefined is not an object (evaluating 'item.amount.currency')

以下是适用于 flatList 数据源的格式的响应，如下所示：

Array [
  Object {
    "amount": Object {
      "currency": "EUR",
      "value": "1854.99",
    },
    "category": "",
    "comment": "",
    "date": "2018-09-10T02:11:29.184Z",
    "id": "5b996064dfd5b783915112f5",
    "index": 0,
    "merchant": "McD",
    "receipts": Array [],
    "user": Object {
      "email": "aaa@ggg.com",
      "first": "Ombly",
      "last": "Lee",
    },
  },
  Object {
    "amount": Object {
      "currency": "GBP",
      "value": "3222.88",
    },
    "category": "",
    "comment": "",
    "date": "2018-08-13T07:11:01.680Z",
    "id": "5b99606474ab17b7820b3922",
    "index": 1,
    "merchant": "BK",
    "receipts": Array [],
    "user": Object {
      "email": "gler@spoto.com",
      "first": "Gler",
      "last": "Spot",
    },
  }, etc....

这是我在存储后从本地 RealmDB 请求它时的样子：

Array [
  Object {
    "0": Object {  <---- seems this extra line is causing the issues. 
      "amount": Object {
        "currency": "EUR",
        "value": "1854.99",
      },
      "date": 2018-09-10T02:11:29.184Z,
      "id": "5b996064dfd5b783915112f5",
      "merchant": "McD",
      "receipt": null,
      "user": Object {
        "email": "aaa@ggg.com",
        "first": "Ombly",
        "last": "Lee",
      },
    },
    "1": Object {
      "amount": Object {
        "currency": "GBP",
        "value": "3222.88",
      },
      "date": 2018-08-13T07:11:01.680Z,
      "id": "5b99606474ab17b7820b3922",
      "merchant": "BK",
      "receipt": null,
      "user": Object {
        "email": "gler@spoto.com",
        "first": "Gler",
        "last": "Spot",
      },
    }, etc....

基本上，我需要以一种可以用作平面列表数据源的方式从 Realm 检索数据。

提前非常感谢您。

编辑 以下是 API 响应的外观：

{
"expenses": [
    {
        "id": "5b996064dfd5b783915112f5",
        "amount": {
            "value": "1854.99",
            "currency": "EUR"
        },
        "date": "2018-09-10T02:11:29.184Z",
        "merchant": "McD",
        "receipts": [],
        "comment": "",
        "category": "",
        "user": {
            "first": "Ombly",
            "last": "Lee",
            "email": "aaa@ggg.com"
        },
        "index": 0
    },
    {
        "id": "5b99606474ab17b7820b3922",
        "amount": {
            "value": "3222.88",
            "currency": "GBP"
        },
        "date": "2018-08-13T07:11:01.680Z",
        "merchant": "BK",
        "receipts": [],
        "comment": "",
        "category": "",
        "user": {
            "first": "Gler",
            "last": "Spot",
            "email": "gler@spoto.com"
        },
        "index": 1
    }, etc....
 ]

我的平面列表

 return (
<View>
  <ScrollView>
    <FlatList
      data={data}
      showsVerticalScrollIndicator={false}
      renderItem={({ item }) => (
        <ExpenseCard
          date={item.date}
          category={item.category}
          amount={item.amount.currency + item.amount.value}
          merchant={item.merchant}
          user={
            item.user.first + " " + item.user.last + "\n" + item.user.email
          }
        />
      )}
      keyExtractor={item => item.id}
    />
  </ScrollView>
</View>
  );
}

Answer 1

试试这个：

<FlatList 
     data={this.state.YourApiData.expenses} //You need to access expenses key.
     showsVerticalScrollIndicator={false}
     renderItem={({item,index}) =>
           <View key={index}>
              <View >
                <Text>ID: {item.id}</Text>
                <Text>Amount and Currency: {item.amount.value} - {item.amount.currency}</Text>
                <Text>Date: {item.date}</Text>
               </View>
            </View>
    />