ネイティブコンソールログプロキシオブジェクトに反応します

Question

私はreact-nativeチュートリアルに従っていましたが、私は奇妙な結果に遭遇しました。ここで

は私がTextInputから来ているtextを印刷するconsole.logを使用するコード

module.exports = React.createClass({ 
    getInitialState(){ 
    return({ 
     tasks: ['Take Course', "Clean house"], 
     task: '' 
    }) 
    }, 
    render() { 
    return(
     <View style={styles.container}> 
     <Text style={styles.header}> 
      ToDoList 
     </Text> 
     <TextInput 
      style = {styles.inputbox} 
      placeholder="Type task" 
      onChange={(text) => { 
      this.setState({task: text}); 
      console.log(this.state.task); 
      }} 
     /> 
     </View> 
    ) 
    } 
}) 

です。

ここにシミュレータがあります。

私はそれがクロムコンソールで1、12と123を印刷することを期待していました。

しかし、それはこのproxyオブジェクトを印刷し、このオブジェクトが何であるか、なぜ私がこの

を得ましたか。

Answer 1

onChangeの代わりにonChangeTextを使用してください。 https://facebook.github.io/react-native/docs/textinput.html

さらに、this.setStateは非同期呼び出しであるため、状態が設定されるときは未定義です。その場合、状態が変更されたことを確認するために、console.logをコールバックとして呼び出さなければなりません。

this.setState({ 
    task: text 
},() => { 
    console.log(this.state.task) 
})