React native 选择器选择的值给出 undefined is not an object 错误

Question

我正在使用以下代码进行选择器并将从选择器中选择的值发送到 api 调用，我不断收到此错误可能未处理的承诺拒绝（id：1）：未定义不是对象（评估 'this.state.selected1 ') 我做错了什么？

'use strict'
import React, { Component } from 'react';
const ReactNative = require('react-native');
const {
Picker,
AppRegistry,
StyleSheet,
Navigator,
Text,
View,
TextInput,
Button,
ScrollView
} = ReactNative;
const Item = Picker.Item;
import { Actions } from 'react-native-router-flux';
import api from './utilities/api';

export default class MarkAttTab extends Component{

constructor(props) {
super(props);

this.state = {

 remarkstext: 'Remarks' ,
 buttonvalue: 'Submit' ,
 selected1: '--Select--',
 selected2: '--Select--',
 color: 'red',
 mode: Picker.MODE_DIALOG,
 };

 }


async submit() {
// Actions.HomeScreen();
const today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
const yyyy = today.getFullYear();
const hh= today.getHours();
const min=today.getMinutes();
const sec=today.getSeconds();


if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 
const fordate = dd+'-'+mm+'-'+yyyy;
const fordate2 = yyyy+'-'+mm+'-'+dd;
const username = 'testuser';
console.log(this.state.selected1);
const res = await api.getMarkAtt(this.state.selected1,this.fordate,this.fordate2,this.state.remarkstext,this.state.selected2,this.username);
// const status= res.status;
console.log('log'+res);

if(status==='success'){
  Actions.HomeScreen();
}

}


render() {

return (
    <View style={styles.container}>
    <ScrollView>
    <View style={{backgroundColor:'#008365',marginLeft:20,marginRight:20,marginTop:10}}>

        <Text style={styles.welcome}>
          {"Date:"+new Date("2017-02-13").toString()}
        </Text>

        </View>

        <View style={{backgroundColor:'#1A8E74',marginLeft:20,marginRight:20,marginTop:2,paddingLeft:20,paddingRight:20}}>
        <Text style={{color:'white',fontSize:15}}>Attendance</Text>
        <Picker
        style={styles.picker}
        selectedValue={this.state.selected1}
        onValueChange={(selected1) => this.setState({ selected1 })}
        >
        <Picker.Item label="--Select--" value="0" key="0" />
        <Picker.Item label="O" value="1" key="1"/>
        <Picker.Item label="P" value="2" key="2"/>
        <Picker.Item label="A" value="3" key="3"/>
      </Picker>
        <Text style={{color:'white',fontSize:15}}>Reason</Text>
       <Picker
        style={styles.picker}
        selectedValue={this.state.selected2}
        onValueChange={(selected2) => this.setState({ selected2 })}>
        <Picker.Item label="--Select--" value="4" key="4" />
        <Picker.Item label="Weekly Off" value="5" key="5"/>
        <Picker.Item label="At Store" value="6" key="6"/>
        <Picker.Item label="Medical" value="7" key="7"/>
      </Picker>
        <Text style={{color:'white',fontSize:15}}>Remarks</Text>
        <TextInput
        style={styles.textInputLayout}
      onChangeText={(remarkstext) => this.setState({remarkstext})}
      value={this.state.remarkstext}
    />

    <View style={styles.buttonView}>

    <Button
      onPress={this.submit}
      title={this.state.buttonvalue}
      color='#FF7323'>
    </Button>
    </View>
    </View>
  </ScrollView>
    </View>
   )

   }

   changeMode = () => {
    const newMode = this.state.mode === Picker.MODE_DIALOG
    ? Picker.MODE_DROPDOWN
    : Picker.MODE_DIALOG;
this.setState({mode: newMode});
   };



  }

Answer 1

我想你忘了bind event in Button，使用这部分：

<Button
   onPress = {this.submit.bind(this)}
   title = {this.state.buttonvalue}
   color = '#FF7323'>
</Button>

你可以在constructor中定义binding：

constructor(props) {
    super(props);
    this.state = {
        remarkstext: 'Remarks' ,
        buttonvalue: 'Submit' ,
        selected1: '--Select--',
        selected2: '--Select--',
        color: 'red',
        mode: Picker.MODE_DIALOG,
    };
    this.submit = this.submit.bind(this);
}

更新- fetch 调用模式：

fetch(url)
    .then(response => response.json())
    .then(response => {
       console.log(response);
    })
    .catch( error => 
        console.log('There has been a problem with your fetch operation: ' + error.message);
    )

你需要Catch the exceptions这样报错。