Отображение через массив json для рендеринга экрана React Native - PullRequest
Новая
       14

Отображение через массив json для рендеринга экрана React Native

0 голосов
/ 28 мая 2020

У меня есть проанализированный массив json, сохраненный как переменная в части конструктора this.state (сохраненный как this.state.accordionarr). Затем я пытаюсь отобразить список Accordion (из ANTD Mobile RN). Однако, когда я пытаюсь получить доступ к this.state.accordionarr, я получаю, что TypeError undefined не является объектом (оценка this.state.accordionarr). Однако я знаю, что переменная сохранила правильный массив json с журналом консоли. Вот мой код:

Это та часть, где я изначально создаю массив 

if (this.state.idofdate != null && this.state.idofdate != undefined && this.state.idofdate != "") {
      db.collection('entirelog').doc(this.state.idofdate).collection('meals').get().then(querySnapshot => {
        const yourDocuments = querySnapshot.docs.map((doc) => doc.data());
        this.setState({
          accordionarr: yourDocuments
        });
        console.log(this.state.accordionarr);
      })
      .catch(err => {
        alert(err);
      });
    }

Это console.log this.state.accordionarr, что правильно. Мне нужен проанализированный json 

Array [
  Object {
    "carbohydrate": 8,
    "id": 0,
    "name": "kimbap",
    "protein": 1111,
  },
  Object {
    "carbohydrate": 67,
    "id": 1,
    "name": "soup",
    "protein": 56,
  },
]

Здесь я пытаюсь визуализировать и получить доступ к переменной. 

function renderAccordion() {
      return this.state.accordionarr.map((item,index) => {
        return(
          <View key={index}>
            <Accordion
              onChange={this.onChange}
              activeSections={this.state.activeSections}
            >
              <Accordion.Panel header= {item.name}>
                <List>
                  <List.Item>{item.protein}</List.Item>
                  <List.Item>{item.carbohydrate}</List.Item>
                </List>
              </Accordion.Panel>
            </Accordion>
          </View>
        );
      });
    }
...