Пустой вывод в цикле массива в реагировать родной - PullRequest
Новая
       13

Пустой вывод в цикле массива в реагировать родной

1 голос
/ 17 апреля 2019

Мой вывод следующего кода пуст.Я не могу понять, почему вопрос не печатается и даже не отвечает кнопкам.

Пробовал проверять различные ответы и менять методы вызова.Ошибка не отображается в коде.

const datas = [
        {
          id: 1,
          text: "Question 1",
          ans: [
            {
              id: 1,
              name: "Ans 1",
            },
            {
              id: 2,
              name: "Ans 2",
            }
          ]
        },
        {
          id: 2,
          text: "Question 2",
          ans: [
            {
              id: 1,
              name: "Ans 1",
            },
            {
              id: 2,
              name: "Ans 2",
            }
          ]
        },
        {
          id: 3,
          text: "Question 3",
          ans: [
            {
              id: 1,
              name: "Ans 1",
            },
            {
              id: 2,
              name: "Ans 2",
            }
          ]
        }
        ]
      ;

    return (
      <View style={styles.container}>
        <Text> Question 1</Text>
        <View style={styles.cardContainer}>
          <View style={styles.card}>
            {datas.map((data) => {
              <Text style={styles.quesText}> {data.text} </ Text>
                  { data.ans.map((answ) => {
                    <TouchableOpacity style={styles.choiceButton} onPress={ () => this.props.navigation.navigate('Quiz')}>
                    <Text style={styles.buttonText}>{answ.name}</Text>
                    </TouchableOpacity>
                  })}
              })}
              </View>
        </View>
      </View>
    )

}}

Должно появиться: Вопрос 1

и две кнопки с ответом 1 и ответом 2

1 Ответ

2 голосов
/ 17 апреля 2019

В обоих ваших map использованиях вы ничего не возвращаете. Итак, просто добавьте return для каждого контента. Также обратите внимание, что вы не можете вернуть несколько детей, вместо этого оберните их в <View>, чтобы достичь своей цели. Здесь у вас есть правильный код: 

return (
  <View style={styles.container}>
    <Text> Question 1</Text>
    <View style={styles.cardContainer}>
      <View style={styles.card}>
        {datas.map(data => {
          return (
            <View>
              <Text style={styles.quesText}>{data.text}</Text>
              {data.ans.map(answ => {
                return (
                  <TouchableOpacity
                    style={styles.choiceButton}
                    onPress={() => this.props.navigation.navigate('Quiz')}>
                    <Text style={styles.buttonText}>{answ.name}</Text>
                  </TouchableOpacity>
                );
              })}
            </View>
          );
        })}
      </View>
    </View>
  </View>
);
...