反应原生数组循环中的空白输出

Question

以下代码的输出为空白。我无法弄清楚为什么没有打印问题甚至没有回答按钮。

尝试检查各种答案并更改呼叫方法。代码中没有显示错误。

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>
    )

}}

它应该显示： 问题一

还有两个带有 Ans 1 和 Ans 2 的按钮

Answer 1

在您的 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>
);