Select 选项未呈现

Question

组件

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，我不明白这是怎么回事。我是否遗漏了生命周期方法的某些内容？页面加载时区域数组为空，然后 componentDidMount() 重新渲染并且不再为空。

Answer 1

您只需要 return renderRegionPickList 中 map 的结果，目前，它 returns undefined.

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

Select 选项未呈现

Select options are not rendering

javascript

reactjs

axios