Цикл вложенного объекта массива в ListView React native

В настоящее время я пытаюсь поиграть с react-native ..

Я хочу создать представление списка, которое получает источник данных из var, который содержит объект с вложенным массивом внутри.

var questionArray = [
  {
    question: "What is the emotion of the user? choose all that apply!",
    answerArray: [
      { name: "Cheerful", status: true, answered: false },
      { name: "Impulsive", status: false, answered: false },
      { name: "Firm", status: false, answered: false },
      { name: "Merry", status: true, answered: false },
      { name: "Jumpy", status: false, answered: false },
      { name: "Energetic", status: false, answered: false },
      { name: "Glowing", status: false, answered: false },
      { name: "Animated", status: false, answered: false },
      { name: "Lively", status: false, answered: false },
      { name: "Creepy", status: false, answered: false },
      { name: "Excited", status: true, answered: false },
      { name: "Tense", status: false, answered: false },
      { name: "Unrestful", status: false, answered: false },
      { name: "Pleased", status: true, answered: false },
      { name: "Unrestful", status: false, answered: false },
      { name: "Hasty", status: false, answered: false },
      { name: "Delighted", status: true, answered: false },
      { name: "Hedonistic", status: false, answered: false },
      { name: "Eager", status: false, answered: false },
      { name: "Joyful", status: false, answered: false },
    ]
  },
  {
    question: "What is the best way to describe this person's character? Choose all that apply.",
answerArray: [
      { name: "Cheerful", status: true, answered: false },
      { name: "Impulsive", status: false, answered: false },
      { name: "Firm", status: false, answered: false },
      { name: "Merry", status: true, answered: false },
      { name: "Jumpy", status: false, answered: false },
      { name: "Energetic", status: false, answered: false },
      { name: "Glowing", status: false, answered: false },
      { name: "Animated", status: false, answered: false },
      { name: "Lively", status: false, answered: false },
      { name: "Creepy", status: false, answered: false },
      { name: "Excited", status: true, answered: false },
      { name: "Tense", status: false, answered: false },
      { name: "Unrestful", status: false, answered: false },
      { name: "Pleased", status: true, answered: false },
      { name: "Unrestful", status: false, answered: false },
      { name: "Hasty", status: false, answered: false },
      { name: "Delighted", status: true, answered: false },
      { name: "Hedonistic", status: false, answered: false },
      { name: "Eager", status: false, answered: false },
      { name: "Joyful", status: false, answered: false },
    ]
  }
];

и я вызвал эту переменную внутри Render ListView, которая запускает функцию renderRow ..

 _renderRow( rowData, sectionID, rowID ) {
    return (
      <View>
        <Text>{rowData.question}</Text>
        <Text>{rowData.answerArray[0].name}</Text>
      </View>
    );
  }

  render() {
    return (
        <View> 
          <ListView 
            dataSource={this.state.dataSource}
            renderRow={this._renderRow.bind(this)}
          />
        </View>
    );
  }

Как визуализировать цикл внутри этого listView? Даже когда я жестко закодировал индекс, как в приведенном выше коде, он не работает ..

Спасибо.


react-native reactjs react-native-listview
person Hazim Ali    schedule 30.03.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы должны сделать два отдельных компонента: Question & Answer

Я сделал для вас Codepen в качестве примера, используя ваши данные

Сначала я передаю questionsArray как prop компоненту ListView:

class Application extends React.Component {
  render() {
    return (
      <div>
        { questionsArray.map((question, key) => <ListView key={`listview-${key}`} question={question} />) }
      </div>
    );
  }
}

Затем вы можете передать ответы компоненту ListViewItem, например:

class ListView extends React.Component {
  render() {
    return (
      <div>
        {this.props.question.question}
        {this.props.question.answerArray.map((answer, key) => <ListViewItem answer={answer} />)}
      </div>
    );
  }
}

Это ListViewItem:

class ListViewItem extends React.Component {
  render() {
    return (
      <div>
        {this.props.answer.name}
      </div>
    );
  }
}
person dschu    schedule 30.03.2017
comment
спасибо .. это работает .. это означает, что я не могу получить доступ к объекту прямо из объекта справа .. Спасибо, чувак! (Y) - person Hazim Ali; 30.03.2017
comment
Вы могли бы это сделать, но я очень рекомендую передать все как реквизит. Это поможет вам позже, когда вы начнете использовать redux. :) Ваше здоровье! - person dschu; 30.03.2017