arrays - 反应原生数组循环中的空白输出
问题描述
我的以下代码输出为空白。我无法弄清楚为什么没有打印问题甚至没有回答按钮。
尝试检查各种答案并更改呼叫方法。代码中没有显示错误。
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
和两个带有 Ans 1 和 Ans 2 的按钮
解决方案
在您的两种map
用法中,您都没有返回任何东西。因此,只需return
为每个内容添加一个。另请注意,您不能返回多个孩子,而是将它们包装在 a<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>
);
推荐阅读
- python - 用 replace_regex 替换 pyspark 中的括号
- postgresql - 使用灵活的下限为 DataRange 创建检查约束。Postgres
- svelte - 如何从组件中复制或克隆元素
- javascript - 如何在axios中制作动态baseURL
- python - 要删除的熊猫数据透视表列名称和值列名称
- flutter - 使用 Firebase 实时数据库 Flutter 进行实时更新
- database - MongoDB:$lookup 后的 $group 不起作用
- javascript - 嵌入图像不出现 discord.js v12
- django - Django扩展模板标签被写为未解析的文本
- resteasy - 在resteasy中返回可能为空的Uni或空的Multi时,http代码是什么?