Как мне получить мой flatList для рендеринга объектов Array с вложенными объектами в качестве атрибутов из useState? - PullRequest
Новая
       35

Как мне получить мой flatList для рендеринга объектов Array с вложенными объектами в качестве атрибутов из useState?

0 голосов
/ 26 сентября 2019

Я хочу сделать следующее: 1) получить данные из API 2) сохранить их в экземпляре локальной области 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] 
  });
});
};

2-й вызов setData - это тот, который я пытаюсь получить, но форматмассива объектов при выполнении запроса Realm и не распознается плоским списком как источник данных и выдает следующую ошибку при попытке визуализации: 

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....
 ]

Мой FlatList 

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

1 Ответ

0 голосов
/ 26 сентября 2019

Попробуйте: 

<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>
    />
...