Как показать содержимое ответа сервера в аккордеоне в реагировать родной? - PullRequest
Новая
       83

Как показать содержимое ответа сервера в аккордеоне в реагировать родной?

0 голосов
/ 29 декабря 2018

Я использую гармошку native base UI Kit ( Я следую за этим документом ).Но проблема в том, что я не могу дать пользовательское содержание в аккордеоне.Содержимое, которое я пытаюсь дать, является ответом выборки с сервера.Формат ответа json (responseData) будет таким:

json 

[
  {
    data: {
      description: "",
      curriculum: [
        {
          key: 0,
          id: 0,
          type: "section",
          title: "A1. This is first Section title",
          duration: 0,
          meta: []
        },
        {
          key: 1,
          id: "2821",
          type: "unit",
          title: "1. Unit1",
          duration: 0,
          meta: []
        },
        {
          key: 2,
          id: "2864",
          type: "unit",
          title: "2. Unit2",
          duration: 0,
          meta: []
        },
        {
          key: 17,
          id: 0,
          type: "section",
          title: "A2. This is the second section title",
          duration: 0,
          meta: []
        },
        {
          key: 18,
          id: "2903",
          type: "unit",
          title: "1. Unit1",
          duration: 0,
          meta: []
        },
        {
          key: 19,
          id: "2905",
          type: "unit",
          title: "2. Unit2",
          duration: 0,
          meta: []
        }
      ]
    }
  }
];

Кроме того, нативная часть реакции выглядит следующим образом 

componentWillMount(){
    fetch(url)
      .then(response => response.json())
      .then(responseData => {
        this.setState({
          details: responseData
        });
      });
  }

_renderHeader(item, expanded) {
    return (
      <View>
        <Text style={{ fontWeight: "600" }}> {item.title}</Text>
        {expanded ? (
          <Icon style={{ fontSize: 18 }} name="remove-circle" />
        ) : (
          <Icon style={{ fontSize: 18 }} name="add-circle" />
        )}
      </View>
    );
  }
_renderContent(item) {
    return (
      <View>
        {item.type === "unit" ? (
          <Text>
            {item.content}
          </Text>
        ) : (
          <View />
        )}
      </View>
    );
  }
 ...
<Accordion
            dataArray={this.state.details}
            animation={true}
            expanded={true}
            renderHeader={this._renderHeader}
            renderContent={this._renderContent}
          />

1 Ответ

0 голосов
/ 29 декабря 2018

Рассматривая пример, которому вы следуете, структура данных, которую они используют, не совсем соответствует структуре данных, которую вы используете.Вот что они используют: 

 const dataArray = [
  { title: "First Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Second Element", content: "Lorem ipsum dolor sit amet" },
  { title: "Third Element", content: "Lorem ipsum dolor sit amet" }
];

Они используют массив объектов, которые при просмотре ваших образцов данных могут быть тем, что находится внутри вашего свойства учебного плана.Но похоже, что вы устанавливаете весь ответ json как ваш this.state.details.

Вам необходимо преобразовать ваши responseData во что-то более тесно выровненное со структурой данных из примера.Возможно, с помощью функции .map, чтобы все, что у вас получилось, было более полезным.Вот SO вопрос, который показывает, как использовать функцию карты. ES6 отобразит массив объектов, чтобы вернуть массив объектов с новыми ключами

В вашем _renderContent вы звоните item.content, но, глядя на данные, вы не предоставили ни одного из ваших предметовиметь свойство контента.Поэтому, позвонив по номеру item.content, вы получите ответ undefined.

...