在ListView React native中循环嵌套数组对象

Question

我目前正在尝试使用 react-native..

我想创建一个列表视图，从 var 中获取 dataSource，其中包含一个内部有嵌套数组的对象。

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 },
    ]
  }
];

我在渲染 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 中渲染循环？ 即使当我像上面的代码那样硬编码索引时，它也不起作用..

谢谢。

Answer 1

你应该制作两个独立的组件：Question & Answer

I've made a Codepen for you as an example, using your data

首先，我将 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>
    );
  }
}