反应本机选取器选定的值给出undefined不是对象错误

Question

我正在使用下面的代码选择器，并将选择从值选择器的值发送到API调用，我不断收到此错误可能未处理的承诺拒绝（ID：1）：undefined不是一个对象（评估'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

我想你在Button忘了bind的event，使用此部分：

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

您可以定义binding在constructor：

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和这样的错误。