选择选项未呈现答案

【问题标题】：Select options are not rendering选择选项未呈现
【发布时间】：2017-02-18 00:03:44
【问题描述】：

组件

import React from 'react';
import { getRegions } from '../helpers'

class RegionSelect extends React.Component {
  constructor(props) {
      super(props);
      this.state = { regions: [],
                     selectedRegion: ''
                   };

      this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    var self = this
    getRegions().then(val => {
      self.setState({regions:val});
    })
  }

  handleChange(event) {
    this.setState({selectedRegion: event.target.value});
  }

  renderRegionPickList() {
    console.log('regions');
    console.log(this.state.regions);
    this.state.regions.map((o) => {
      return (
        <option key={o.label} value={o.value}>{o.label}</option>
      )
    })
  }

  render() {
    return (
      <div className="slds-form-element">
        <svg aria-hidden="true" className="slds-icon slds-icon-text-default slds-icon--small slds-p-around--xx-small">
          <use xlinkHref={locationIcon}></use>
        </svg>
        <label className="slds-form-element__label">Region</label>
        <div className="slds-form-element__control">
          <div className="slds-select_container">
            <select className="slds-select" value={this.state.selectedRegion} onChange={this.handleChange}>
              <option value=''>--select a region--</option>
              {this.renderRegionPickList()}
            </select>
          </div>
        </div>
      </div>
    );
  }
}

export default RegionSelect;

帮手

import axios from 'axios'

export function getRegions() {

  return new Promise(function(resolve,reject){

  // make requst for select values
  var request = axios.get(`${REST_API_URL}sobjects/User/describe/`,
     API_TOKEN
   ).then(function (response){
      const region = response.data.fields.find(field => field.name === 'Region__c');
      return resolve(region.picklistValues);
   })
  })
}

网页

控制台

基于docs，我不明白这是怎么回事。我是否缺少生命周期方法的某些内容？页面加载时，regions 数组为空，然后componentDidMount() 重新渲染，不再为空。

【问题讨论】：

您尝试绑定renderRegionPickList 吗？（如果你愿意，你也可以绑定componentDidMount来避免var self = this）
是的。我没有将它包含在我的代码中，因为这不是文档所建议的。（感谢绑定componentDidMount的提示！）

标签： javascript reactjs axios

【解决方案1】：

您只需在renderRegionPickList 中返回map 的结果，目前它返回undefined。

renderRegionPickList() {
  return this.state.regions.map((o) => (
    <option key={o.label} value={o.value}>
      {o.label}
    </option>
  ))
}

【讨论】：