如何在ReactJS中从JSON文件创建选项标记列表
如何在ReactJS中从JSON文件创建选项标记列表
提问于 2018-06-03 06:19:43
我对ReactJS非常陌生，我正在尝试使用表单。具体地说，我正在尝试基于(本地) <option>文件中的条目构建一个JSON标记列表。
单步执行调试器，我可以看到这些值被正确读取和解析。然而，在呈现的页面中什么也没有出现，我不太确定原因。
下面是我编写的组件：
import React, { Component } from 'react';
const countries = require('../Data/countries.json')
class Countries extends Component {
constructor(props) {
super(props);
this.state = {
countries: countries,
}
};
render() {
return (
<div className="Countries">
<select name={this.props.name}>
{
Object.entries(this.state.countries).forEach((entry, _) => {
let key = entry[0]
let value = entry[1]
return <option value={key}>{value}</option>
})
}
</select>
</div>
);
}
}
export default Countries;JSON文件来自https://raw.githubusercontent.com/umpirsky/country-list/master/data/en_GB/country.json。因此，条目类似于"CC": "Country name"。
在主App.js中，我按如下方式实例化Countries：
<Countries name="country" />我看不到任何明显的我遗漏的东西。那是什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-03 06:42:33
Array#forEach没有返回值，并且回调中的return不执行任何操作
请改用Array#map()
<select name={this.props.name}>
{
Object.entries(this.state.countries).map((entry, _) => {
let key = entry[0]
let value = entry[1]
return <option value={key}>{value}</option>
})
}
</select>或使用Object.keys()
<select name={this.props.name}>
{
Object.keys(this.state.countries).map(key => {
return <option value={key}>{this.state.countries[key]}</option>
})
}
</select>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50661634
复制相关文章
相似问题