ネイティブピッカーに問題が発生しました。

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

ファイル - 動的は、option これは、ピッカーを表示するための基本的なコンポーネントを使用します。

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を動的にレンダリングする正確な方法です。 文書を読んだ後、指定に従って指示に従ってください。 助けてください、私はこれで見ていないでしょう、事前に感謝します。

NB：ピッカーを動的にロードしているので、必要なときにいつでも呼び出すコンポーネントの中に、ピッカーコンポーネントの{... 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> 
); 
}