不変の無効を引き起こすネイティブボタンに反応する

Question

私の人生にとって、この小さなコードがうまくいかない理由はわかりません！

私はButton要素に問題を分けました（import文はうまくいくようです）。

「Invariant Violation：要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要ですが、取得済み：未定義です。エラーメッセージが本当に曖昧であるため、

import React, { ScrollView, Image, StyleSheet, Button } from "react-native"; 
import { connect } from "react-redux/native"; 

const onButtonClicked =() => { 

}; 

class Login extends React.Component { 
    componentDidMount() { 

    } 

    render() { 
     return (
      <ScrollView style={{flex: 1}} 
         contentContainerStyle={{ 
          justifyContent: "center", 
          alignItems: "center" 
         }}> 
       <Image source={require('../../img/coin.png')} 
        resizeMode={Image.resizeMode.cover} 
        style={Styles.coinLogo} /> 

       <Button title="Login default" 
         onPress={() => {}} /> 
      </ScrollView> 
     ); 
    } 
} 

Login.propTypes = { 
    dispatch: React.PropTypes.func 
}; 


Login.defaultProps = { 
    dispatch:() => {} 
} 

const Styles = StyleSheet.create({ 
    coinLogo: { 
     marginTop: 50, 
     height: 200, 
     width: 200, 
    }, 
    loginButton: { 
     marginTop: 50, 
    }, 
}); 

export default connect((state) => ({ 

}))(Login); 

Answer 1

これは厄介な問題であることは、オブジェクトの構造化代入して（と思う）関係しているオブジェクトをdestructureとき

、言う：。。

var myObject = {a: 1, b: 2, c: 3}; 

let {a, b, c, d} = myObject; 

あなたtranspilerは以下を行います。

let a = myObject.a; 
let b = myObject.b; 
let c = myObject.c; 
let d = myObject.d; // Ah! But we never defined a 'd' key, did we? 

そしてもちろんの

は、非既存のキーはエラーを出さずに undefinedに評価するので、あなたが得るもの undefinedの値を持つ dです。

インポートに戻りましょう。

import React from 'react'; // The React API moved to the react package, you should be getting an error because of this. See https://github.com/facebook/react-native/releases/tag/v0.26.0 (Unless you are using React Native <= 0.25) 
import { ScrollView, Image, StyleSheet, Button } from "react-native"; 
import { connect } from "react-redux"; // As far as I know, the connect is exported directly from 'react-redux', but it might be OK the way you had it. 

さて、あなたrenderに行ってみましょう：私は、彼らが次のようになりべきだと思います。 ScrollView、Image、およびButtonをレンダリングしようとしています。 RNはそのうちの1つがundefinedに評価されているためエラーが発生していますが、これは許可されていませんが、どちらが表示されているのかわかりません。試してみてconsole.logの3つの値を調べ、どちらが未定義であるかを確認してください。しかし、Buttonだと強く思っています。これはRN 0.37に追加されています.のインポートで前に述べたように、0.26.0タグより前のRNのバージョンを実行していなければなりません。別のエラーです。

その場合は教えてください。