选择选项不渲染

组件选择选项不渲染

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()执行重新渲染并且不再为空。

来源

2017-02-18 Tyler Zika

你试过绑定'renderRegionPickList'吗？（如果你愿意，你也可以绑定'componentDidMount'来避免'var self = this'） – JSilv

是的。我没有将它包含在我的代码中，因为这不是文档所建议的。（感谢提供绑定'componentDidMount'的提示！） –

您只需在renderRegionPickList内返回map的结果，就像当前它返回undefined一样。

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

来源

2017-02-18 01:29:53 Dwhiffing

选择选项不渲染

回答

相关问题