Question

我在RN Picker项目中遇到严重问题，每当我尝试加载选择器项时，我都会收到以下错误。

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 这将使用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>
  );
}

React Native Picker项目问题

1 个答案: