如何从 json 对象创建下拉列表？答案

【问题标题】：How to create a dropdown list from a json object?如何从 json 对象创建下拉列表？
【发布时间】：2017-05-06 02:28:35
【问题描述】：

我在这里做错了什么？（可能一切）。我喜欢'foo'作为选择和值选择为1.我得到的错误是'对象没有作为反应子女的无效。

constructor(props) {
     this.state = {options: {name: 'foo', value: 1}};
  }

 render() {
    return (
        <div>
          <select>{this.state.options}</select>
        </div>
    );
}

【问题讨论】：

options 是{ name, value } 对象的数组吗？不太确定当前的数据结构如何转换为选项

标签： javascript html reactjs ecmascript-6

【解决方案1】：

首先，我认为您希望您的选项是一个对象数组。然后在你的渲染函数中，做这样的事情：

constructor(props) {
  super(props);
  this.state = {options:[{name: 'foo', value: 1}]};
}
render() {
  return <div>
    <select>{this.state.options.map(function(item) {
      return <option value={item.value}>{item.name}</option>;
    })}</select></div>
}

【讨论】：

将选项设为对象数组并实现您的代码。它不再爆炸，但列表是空的。
你的构造函数是这样的吗？: constructor(props) { this.state = {options: [{name: 'foo', value: 1}] }; }
查看我的最新编辑，我认为您需要在构造函数中调用 super(props)。

【解决方案2】：

#1: 您绝对不需要将这些选项存储在组件的state 中。

#2: 将您的对象替换为数组并使用Array#map 呈现每个选项。

render() {
  const options = [{ name: 'foo', value: 1 }]
  return (
    <select>
      {options.map(option =>
        <option value={option.value}>{option.name}</option>
      )}
    </select>
  )
}

【讨论】：

好建议！我不需要将值存储在状态中。