[React Native] classコンポーネントからfinctionコンポーネントに書き換えたい

Question

前提

• React Native
• Firebase authentication
• Expo

要件

・Firebase authenticationを利用してFirebaseにユーザー登録
・classコンポーネントで書かれているサンプルをfunctionコンポーネントに書き換えたい(Hooks利用)

エラー

送信ボタンを押すとエラーになる

おそらく9行目のhandleSubmitの関数がうまくいっていない

    const handleSubmit = () => {
        const { email, password } = state;
        signup(email, password);
    }

コード全文
コメントアウトしてる箇所はclassコンポーネントのサンプル（こっちは問題なく登録できます）

import React, { useState } from 'react';
import { Text, View, Button, TextInput } from 'react-native';
import { signup } from './firebase';

const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    // おそらくここが間違っているがどうすればいいかわからない
    const handleSubmit = () => {
        const { email, password } = state;
        signup(email, password);
    }

    return (
        <>
            <Text>SignUp</Text>
            <View>
                <Text>メールアドレス</Text>
                <TextInput
                    onChangeText={(email) => setEmail({email})}
                    value={email}
                    placeholder="メールアドレスを入力してください"
                />
            </View>

            <View>
                <Text>パスワード</Text>
                <TextInput
                    onChangeText={(password) => setPassword({password})}
                    value={password}
                    placeholder="パスワードを入力してください"
                />
            </View>

            <View>
                <Button
                    title="送信"
                    onPress={() => handleSubmit()}
                />
            </View>
        </>
    );
}

// class SignUp extends React.Component {
//   constructor(props) {
//       super(props);
//       this.state = {
//           email: '',
//           password: '',
//       };
//   }

//   // ユーザー登録のメソッド
//   handleSubmit = () => {
//       const { email, password } = this.state;
//       signup(email, password);
//   }

//   render() {
//       return (
//           <>
//               <View>
//                   <Text>メールアドレス</Text>
//                   <TextInput
//                       onChangeText={(email) => this.setState({email})}
//                       value={this.state.email}
//                       placeholder="メールアドレスを入力してください"
//                   />
//               </View>

//               <View>
//                   <Text>パスワード</Text>
//                   <TextInput
//                       onChangeText={(password) => this.setState({password})}
//                       value={this.state.password}
//                       placeholder="パスワードを入力してください"
//                   />
//               </View>

//               <View>
//                   <Button
//                       title="送信"
//                       onPress={() => this.handleSubmit()}
//                   />
//               </View>
//           </>
//       )
//   }
// }

export default SignUp;

Answer 1

const { email, password } = state;

この一行が不要なのではないでしょうか？

import React, { useState } from 'react';
import { Text, View, Button, TextInput } from 'react-native';
import { signup } from './firebase';

const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    // おそらくここが間違っているがどうすればいいかわからない
    const handleSubmit = () => {
        //const { email, password } = state;
        signup(email, password);
    }

    return (
        <>
            <Text>SignUp</Text>
            <View>
                <Text>メールアドレス</Text>
                <TextInput
                    onChangeText={(email) => setEmail({email})}
                    value={email}
                    placeholder="メールアドレスを入力してください"
                />
            </View>

            <View>
                <Text>パスワード</Text>
                <TextInput
                    onChangeText={(password) => setPassword({password})}
                    value={password}
                    placeholder="パスワードを入力してください"
                />
            </View>

            <View>
                <Button
                    title="送信"
                    onPress={() => handleSubmit()}
                />
            </View>
        </>
    );
}

Comments

[DaisukeMori]

取った場合、フォームに入力すると「Failed proptype: Invalid prop `value` of type `object` supplied to `ForwardRef(TextInput)`,expected `string`.」というWarningが出て、さらにこの状態でボタンを押すと「Error: createUserWithEmailAndPassword failed: First argument "email" must be a valid string.」というエラーが出ます。

[nekoniki]

すみません。
よくよく見てみたら、下記2行も修正が必要です。
onChangeText={(email) => setEmail({email})}
onChangeText={(password) => setPassword({password})}

setXXX()にはオブジェクト形式でなく、無名関数の引数そのままを渡してください。
例. onChangeText={(email) => setEmail(email)}

[DaisukeMori]

ありがとうございます。例のようにしたら登録できました。

１つ質問なのですが、なぜclassコンポーネントではこの部分オブジェクトにして渡しているのに、functionコンポーネントではそのまま渡すのでしょうか？

[nekoniki]

setState()は更新したいstateを丸ごと渡すから(※あくまで渡すイメージ)です。
逆にuseState()を使って独自で定義したsetXXXといった関数は、定義したstateの型をそのまま渡します。
今回は
const [email, setEmail] = useState('');
のように文字列型でemailというstateを定義したのでsetEmail()に渡す引数もそのまま文字列型になります。

例えば、
const [hoge, setHoge] = useState({ fuga : "fugafuga" });
というようにオブジェクトで定義していたら、
setHoge({ fuga : "fugafugafugafuga" })
のようにオブジェクト型で渡します。

[DaisukeMori]

わかりやすい説明ありがとうございました。
useStateで定義した型に合わせてなかったからエラーになったんですね。