Question

我对ReactJS很新，我正在玩表格。具体来说，我尝试根据（本地）JSON文件中的条目构建<option>标记列表。

单步执行调试器，我可以看到正确读取和解析的值。然而，渲染页面中没有任何内容出现，我也不确定原因。

这是我写的组件：

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" />

我无法看到任何明显的遗漏。它是什么？

Answer 1

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>

如何在ReactJS中从JSON文件创建选项标记列表

1 个答案: