Wählen Sie Optionen sind nicht Rendering

Question

Komponente

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; 

Helper

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); 
    }) 
    }) 
} 

Webseite

Console

Basierend auf der docs, sehe ich nicht, wie das falsch ist. Fehle ich etwas mit den Lebenszyklusmethoden? Das Regionen-Array ist leer, wenn die Seite geladen wird, dann gibt componentDidMount() einen neuen Befehl aus und es ist nicht mehr leer.

Answer 1

Sie müssen nur das Ergebnis map innerhalb renderRegionPickList zurückgeben, wie es derzeit undefined zurückgibt.

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