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

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

1 个答案: