React Native Picker 项目问题

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

文件 - 动态选项集 这将使用 Basic 组件来显示 Picker。

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