javascript - ReactJS:映射数据未显示在视图中
问题描述
我有一个函数previewData()
用于映射数据数组,如下所示(在渲染方法中):
const {formData} = this.state;
function previewData() {
formData.map((item, key) => {
console.log("item", item.question);
return (<div>{item.question}</div>)
})
}
在return
render 方法的语句中,我正在使用这样的函数:
<div className="form_preview polaroid unchange_div">
{previewData()}
</div>
这就是我将数据推送到我的数组中的方式(在渲染方法之外):
addFormData() {
const {formQuestion} = this.props;
const formRawData = {
'question': formQuestion,
'type': this.state.qtype
}
this.state.formData.push(formRawData);
this.setState({
success: true
})
}
我可以看到我的控制台也正确记录了日志,但我的视图中没有填充这些值。这里似乎有什么问题?
解决方案
您需要确保previewData()
返回映射结果,以便您的映射<div>
元素数组可以在polaroid
容器内呈现:
function previewData() {
/* Add return before formData.map */
return formData.map((item, key) => {
console.log("item", item.question);
return (
<div>{item.question}</div>
)
})
}
推荐阅读
- javascript - JSPDF 返回使用 ApexCharts 图表创建 PDF 的脚本错误
- android - 如何检查电话号码是否是Android中有效的whatsapp号码?
- python - 如何修复奇怪的模型精度图?
- python - 从 pandas 读取一个大的 CSV 文件后,我在我的工作簿中得到了一个荒谬的文件输出
- python - 熊猫:融化具有相同索引的多个列
- laravel - Git - 用新版本替换 Laravel 安装
- coldfusion - Lucee cfmail 消息 ID
- sprite - 如何在godot上做复合精灵
- javascript - Cypress 捕获所有请求 cy.Route()
- android - 在 LeakCanary 泄漏跟踪中查找原因