Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

reactを勉強していてエラー発生

こういうエラーが出たんですがなんでですか?
また、ほかにおかしなところがあれば教えてほしいです。

./src/components/organisms/Login/Login.jsx
  Line 13:56:  'email' is not defined     no-undef
  Line 13:62:  'password' is not defined  no-undef
Search for the keywords to learn more about each error.
import React,{useState} from 'react'
import {useForm} from 'react-hook-form'



import FormInput from '../../molecules/FormInput/FormInput'
import firebase from '../../../config/firebase'


function Signup (){
  const {register,handleSubmit}=useForm()

const onSubmit=(data)=>{

  firebase.auth().createUserWithEmailAndPassword(data.email,data.password)
  .then(data=>{
console.log(data)
data.user.updateProfile(
  {
    displayName:data.userName
  }
).then(user=>{
console.log(user)
})
  })
.catch(err=>{
  console.log(err)
})}



return (
    <>
    <h2>signup</h2>
    <form onSubmit={handleSubmit(onSubmit)}>
           <FormInput 
           label={"ユーザー名"}
           type={"text"} 
           inputRef={register}
           name={"userName"}
           />
           <FormInput 
           label={"パスワード"} 
           type={"password"} 
            inputRef={register}
            name={"password"}
            />
           <FormInput 
           label={"e-mail"}
           type={"email"}  
           inputRef={register}
           name={"email"}
           />
<button type="submit">送信</button>

    </form>
    </>
)
}

export default Signup
0 likes

3Answer

Comments

  1. 回答ありがとうございます。

    写真の貼り付けができないのでコピペします。

    ```console
    Issues detected. The new Issues tab displays information about deprecations, breaking changes and other potential problems.Go to IssuesLearn more
    webpackHotDevClient.js:91 Console was cleared
    index.js:1 ./src/components/organisms/Login/Login.jsx
    Line 13:56: 'email' is not defined no-undef
    Line 13:62: 'password' is not defined no-undef

    Search for the keywords to learn more about each error.
    console.<computed> @ index.js:1
    overrideMethod @ react_devtools_backend.js:2273
    handleErrors @ webpackHotDevClient.js:174
    push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
    index.js:1 ./src/components/organisms/Signup/Signup.jsx
    Line 36:21: 'handleSubmit' is not defined no-undef
    Line 36:34: 'onSubmit' is not defined no-undef
    Line 40:22: 'register' is not defined no-undef
    Line 46:23: 'register' is not defined no-undef
    Line 52:22: 'register' is not defined no-undef

    Search for the keywords to learn more about each error.
    console.<computed> @ index.js:1
    overrideMethod @ react_devtools_backend.js:2273
    handleErrors @ webpackHotDevClient.js:174
    push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
    index.js:1 ./src/components/organisms/Signup/Signup.jsx
    SyntaxError: C:\Users\DELL\Documents\GitHub\dokusho-app\src\components\organisms\Signup\Signup.jsx: 'return' outside of function (33:0)

    31 |
    32 |
    > 33 | return (
    | ^
    34 | <>
    35 | <h2>signup</h2>
    36 | <form onSubmit={handleSubmit(onSubmit)}>
    console.<computed> @ index.js:1
    overrideMethod @ react_devtools_backend.js:2273
    handleErrors @ webpackHotDevClient.js:174
    push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
    index.js:1 ./src/components/organisms/Login/Login.jsx
    Module not found: Can't resolve '../../../config/firebase/' in 'C:\Users\DELL\Documents\GitHub\dokusho-app\src\components\organisms\Login'
    console.<computed> @ index.js:1
    overrideMethod @ react_devtools_backend.js:2273
    handleErrors @ webpackHotDevClient.js:174
    push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
    webpackHotDevClient.js:76 The development server has disconnected.
    Refresh the page if necessary.
    ```
  2. 期待したような内容と違いますね。

    SyntaxError: C:\Users\DELL\Documents\GitHub\dokusho-app\src\components\organisms\Signup\Signup.jsx: 'return' outside of function (33:0)


    って書いてあるんで、まずは33行目前後にシンタックスエラーがないか確認してみてはどうでしょう?

    あと、gyazoっていうソフトを使うと、スクリーンショットのリンクをすぐに作れますよ。
  3. ありがとうございます。確認しましたが文法のエラーはなかったです。

    ```js
    import React,{useState} from 'react'
    import {useForm} from 'react-hook-form'
    import FormInput from '../../molecules/FormInput/FormInput'
    import firebase from '../../../config/firebase'


    function Signup (){
    const {register,handleSubmit}=useForm()

    const onSubmit=(data)=>{

    console.log("data:",data)

    firebase.auth().createUserWithEmailAndPassword(data.email,data.password)
    .then(data=>{
    console.log(data)
    data.user.updateProfile(
    {
    displayName:data.userName
    }
    ).then(user=>{
    console.log(user)
    })
    })
    .catch(err=>{
    console.log(err)
    }
    )
    }



    return (
    <>
    <h2>signup</h2>
    <form onSubmit={handleSubmit(onSubmit)}>
    <FormInput
    label={"ユーザー名"}
    type={"text"}
    inputRef={register}
    name={"userName"}
    />
    <FormInput
    label={"パスワード"}
    type={"password"}
    inputRef={register}
    name={"password"}
    />
    <FormInput
    label={"e-mail"}
    type={"email"}
    inputRef={register}
    name={"email"}
    />
    <button type="submit">送信</button>

    </form>
    </>
    )
    }

    export default Signup
    ```
  4. 最初の最初に

    ./src/components/organisms/Login/Login.jsx


    ってありますけど、今編集しているファイルはこれなんですか?それもどこかのSignUp.jsx?

    色々分からなくなったら、コンポーネントを呼んでいる大元(通常App.jsxとか?)で、ほとんどのコンポーネントをコメントして、1つずつコメントを外していけば、どこのコンポーネントでエラーなのかが分かりやすいですよ。
    原始的ですが
  5. ざっと見ましたが、知識が欠けている点が色々ありそうなので、一回全部捨てて最初からやり直してみたほうがかなりの近道だと思います。

    あと、多分vscodeは使っていないと思うので、vscode + prettier + typescriptでコードできる環境をまずは作るほうが、断然理解が早いと思います(typescriptがコード補完してくれたりするので)。

    googleで「vscode react typescript 環境設定」とかで検索してみてください。
  6. ありがとうございます。具体的にどの辺から勉強するべきですか?

できればきちんと 質問テンプレートなどを用いていただければ回答しやすいです。

0Like

Your answer might help someone💌