Reactjs 反应错误：如何解决错误？

在这里，我试图建立一个类似亚马逊的网站。我构建了登录页面。但是，每当我在文件中重构代码时，就会出现错误。有人能帮我吗

这是我的login.js文件

import React, { useContext, useState } from 'react';
import { userContext } from '../../App';
import { useHistory, useLocation } from 'react-router';
import { handleGoogleSignIn, handleSignOut, initializeLoginFramework } from './LoginManager';



function Login() {
  const [newUser, setNewUser] = useState(false);
  // const provider = new firebase.auth.GoogleAuthProvider();
  const [user, setUser] = useState({
    isSignedIn: false,   
    name: '',
    email: '',
    photo: ''

  })

  initializeLoginFramework();

    const [loggedInUser, setLoggedInUser] = useContext(userContext);
    const history = useHistory();
    const location = useLocation(); 

    let { from } = location.state || { from: { pathname: "/" } };

  const googleSignIn = () =>{
    handleGoogleSignIn()
    .then(res => {
      setUser(res);
      setLoggedInUser(res);
    })
  }

  const signOut = () =>{
    handleSignOut()
    .then(res => {
      setUser(res);
      setLoggedInUser(res); 
    })
  }
 

  const handleSubmit = (e) => {
    console.log(user.email, user.password)
    if(newUser && user.email && user.password){
    };
      
        // ...}

if(!newUser && user.email && user.password){

  

  // console.log("submitting");

}
     
    e.preventDefault();   
  
  }


  const handleChange = (e) => {
    let isFormValid = true
    console.log(e.target.name);
    if(e.target.name == 'email'){
      isFormValid = /\S+@\S+\.\S+/.test(e.target.value);
      // console.log(isEmailValid);

    }
    if(e.target.name == 'password'){
      const isPasswordValid = e.target.value.length >6;
      const passwordHasNumber = /\d{1}/.test(e.target.value)
      isFormValid =  (isPasswordValid  && passwordHasNumber);
    }
    if(isFormValid){
      const newUserInfo = {...user};
      newUserInfo[e.target.name] = e.target.value;
      setUser(newUserInfo);
    }

  }

  return (
    <div className="App">
{ user.isSignedIn ? <button onClick={signOut}>Sign Out</button> :      
<button onClick={googleSignIn}>Sign in</button>
}
    {
      user.isSignedIn && 
      <div>
        <p>Welcome {user.name}</p>
        <p>Email: {user.email}</p>
        <img src={user.photo} alt=""></img>
      </div>
    }
    <form action="" onSubmit={handleSubmit}>

    <h1>Our Own Authentication</h1>
    <input type="checkbox" name="newUser" onChange={() => setNewUser(!newUser)} id=""/>
    <label htmlFor="newUser">New User Registration</label>
    <br/>
    <br/>
{    newUser && <input type="text" name="name" onBlur={handleChange} placeholder="Enter Name"/>
}    <br/>
    <input type="text" name ="email" onBlur={handleChange} placeholder="Your Email Address" required/>
    <br/>
    <input type="password" name="password" onBlur={handleChange} placeholder="Your Password" required/>
    <br/>
    <input type="submit"  value="Submit"/>
    </form>
    <p style={{color: "red"}}>{user.error}</p>
   {user.success && <p style={{color: 'green'}}>User { newUser?'Created' : 'Logged In' } Succesfully</p>}
    </div>
  );
}

export default Login;

以下是我得到的：

src\components\Login\LoginManager.js
  Line 45:52:  'user' is not defined             no-undef
  Line 45:64:  'user' is not defined             no-undef
  Line 53:31:  'user' is not defined             no-undef
  Line 56:7:   'setUser' is not defined          no-undef
  Line 59:31:  'user' is not defined             no-undef
  Line 62:7:   'setUser' is not defined          no-undef
  Line 70:52:  'user' is not defined             no-undef
  Line 70:64:  'user' is not defined             no-undef
  Line 77:29:  'user' is not defined             no-undef
  Line 80:5:   'setUser' is not defined          no-undef
  Line 81:5:   'setLoggedInUser' is not defined  no-undef
  Line 82:5:   Unexpected use of 'history'       no-restricted-globals
  Line 82:21:  'from' is not defined             no-undef

---

将这些方法从主组件中分离出来是很好的，但是需要将状态作为参数传递给函数，因为它位于不同的文件中，并且位于组件之外，所以一切都将正常工作 所以它不会识别状态，所以当你通过它时，它会工作得很好！！ 更新 比如这个

export const createUserWithEmailAndPassword = (user,setUser) =>{
    firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
    .then((userCredential) => {
      // Signed in 
      var user = userCredential.user;
      // ...
    })
    .then( res => {
      console.log(res);
      const newUserInfo = {...user};
      newUserInfo.error = '';
      newUserInfo.success = true;
      setUser(newUserInfo);
    })
    .catch((error) => {
      const newUserInfo = {...user};
      newUserInfo.error = error.message;
      newUserInfo.success =  false;
      setUser(newUserInfo)
          // ..
      // console.log(errorCode, errorMessage);
    })
    
    } 

当你叫它时，你就知道了

createUserWithEmailAndPassword(user,setUser)

例如： 这是一个文件，其中定义了所有常规方法

const method_a = (user) => {
  firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
    .then((userCredential) => {
      // do something
    })
}

文件B-在这里您将调用该方法

import {method_a} from "./fileA"
const user = // initialize user here
method_a(user)  //pass user as a parameter

---

错误是有效的。在

createUserWithEmailAndPassword

方法中，您没有传递任何用户，因此它不知道任何

user

对象。这就是它抛出错误的原因。你需要将其作为道具传递才能使用它们。同样，您还没有声明setUser，因此它不知道这是什么。这些都是您在代码中犯的简单错误，您试图访问未声明/存在的内容。我可以在哪里声明它？如果您计划在此文件之外使用这些方法作为常规方法，请在这些文件中声明它们并作为道具传递。否则，如果您想在该文件中执行所有操作，请仅在此处声明它们，就像您在第一段代码中所做的那样。我收到了错误消息。请扫描您编写的代码？我收到了错误消息示例代码作为答案。@TusarHaque给您一个示例代码

import {method_a} from "./fileA"
const user = // initialize user here
method_a(user)  //pass user as a parameter