反應原生選取器項目問題

Question

我遇到了RN選取器項目的嚴重問題，每當我嘗試加載選取器項目時出現以下錯誤。

undefined is not an object (evaluating 'this.inputProps.value')

這裏我們的屏幕截圖。

這是我的代碼 - 組件 - 基本

import React, { Component } from 'react'; 
import { Picker } from 'react-native'; 
export default class Basic extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {}; 
    } 
    render() { 
     var options = this.props.list.map((item, key) => { 
      return <Picker.Item label={item} value={item} key={key} /> ; 
     }); 
     return (
      <Picker mode="dropdown" selectedValue={this.props.selected} supportedOrientations={['portrait','landscape']} {...this.props}> 
       { this.props.default && <Picker label={this.props.default} value=""/> } 
      { options } 
      </Picker> 
     ); 
    } 
} 

文件 - 動態OptionSet 這將使用基本組件來顯示機械手。

class DynamicOptionSets extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {}; 
     this.ucfirst = this.ucfirst.bind(this); 
     this._renderMain = this._renderMain.bind(this); 
     this._renderSpinner = this._renderSpinner.bind(this); 
    } 

    componentWillMount() { 
     InteractionManager.runAfterInteractions(() => { 
      this.props["get"+this.ucfirst(this.props.option)](); 
     }); 
    } 

    ucfirst(string) 
    { 
     return string.charAt(0).toUpperCase() + string.slice(1); 
    } 
    render() { 
     return (
      <View> 
       {this._renderSpinner()} 
       {this._renderMain()} 
      </View> 
     ); 
    } 
    _renderMain(){ 
     if(!this.props[this.props.option]['data']){ 
      return null; 
     } 
     return (
      <Basic list={this.props[this.props.option]['data']} { ...this.props }/> 
     ) 
     } 
     _renderSpinner(){...} 
    } 
const mapDispatchToProps = (dispatch, ownProps) => { 
    var {getCountries, getStates, 
     getDepartments, getBranches, 
     getBusinessSectors, getGenPostingGroup, 
     getCustPostingGroup, getVatPostingGroup, 
     getPricelist, getSalesPersons 
     } = ActionCreators; 
    return bindActionCreators({ 
     getCountries, getStates, 
     getDepartments, getBranches, 
     getBusinessSectors, getGenPostingGroup, 
     getCustPostingGroup, getVatPostingGroup, 
     getPricelist, getSalesPersons 
    }, dispatch); 
} 

const mapStateToProps = (state) => { 
    var { 
     countries, countriesUpdate, 
     states, statesUpdate, 
     departments, departmentsUpdate, 
     branches, branchesUpdate, 
     businessSectors, businessSectorsUpdate, 
     genPostingGroup, genPostingGroupUpdate, 
     ccustPostingGroup, ccustPostingGroupUpdate, 
     vatPostingGroup, vatPostingGroupUpdate, 
     pricelist, pricelistUpdate, 
     salesPersons, salesPersonsUpdate, 
    } = state; 
    return { 
     countries, countriesUpdate, 
     states, statesUpdate, 
     departments, departmentsUpdate, 
     branches, branchesUpdate, 
     businessSectors, businessSectorsUpdate, 
     genPostingGroup, genPostingGroupUpdate, 
     ccustPostingGroup, ccustPostingGroupUpdate, 
     vatPostingGroup, vatPostingGroupUpdate, 
     pricelist, pricelistUpdate, 
     salesPersons, salesPersonsUpdate, 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(DynamicOptionSets); 

所以，現在我可以調用動態選項設置只喜歡有規律選取器組件，並指定數據組（選件）

<DynamicOptionSets option="salesPersons" mode="dropdown" onValueChange={this._updateValue.bind(this, 'salesperson')} selectedValue={this.state.form_data.salesperson} />

我不明白爲什麼會這樣，因爲這是我在RN中動態呈現Pickers的確切方式。 已經通過文檔並按照指定的指示進行操作。 請大家幫忙，這可能是我沒有看到的，在此先感謝。

注意：我動態加載選擇器，因此它在我需要的時候調用的組件內，顯示一個應該在選取器組件中解釋{... this.props}的選擇器。

Answer 1

你的代碼有一個基本的錯誤。

render() { 
    var options = this.props.list.map((item, key) => { 
    return <Picker.Item label={item} value={item} key={key} /> ; 
    }); 
    return (
    <Picker mode="dropdown" selected={this.props.selected} supportedOrientations={['portrait','landscape']}> 
     {/*_________________^^^^^^^^____ You should place `selectedValue` here instead */} 
     { this.props.default && <Picker.Item label={this.props.default} value=""/> } 
     { options } 
    </Picker> 
); 
}