Reactjs 在每个渲染上运行useEffect，即使依赖项不变_Reactjs_Firebase

Reactjs 在每个渲染上运行useEffect，即使依赖项不变

reactjs firebase

Reactjs 在每个渲染上运行useEffect，即使依赖项不变,reactjs,firebase,Reactjs,Firebase,我正在React应用程序中使用Firebase auth。我得到的错误如下：未捕获的Firebase错误：Firebase:Firebase应用程序已命名为“[默认]” 存在（应用/重复应用）我正在尝试配置和初始化Firebase应用程序，以使用Firebase auth SDK。使用React类基本组件工作时没有任何错误，但转向React钩子是一个挑战出现问题的地方的一个简单示例： import React, {useState, useEffect} from 'react'; imp

我正在React应用程序中使用Firebase auth。我得到的错误如下：

未捕获的Firebase错误：Firebase:Firebase应用程序已命名为“[默认]” 存在（应用/重复应用）

我正在尝试配置和初始化Firebase应用程序，以使用Firebase auth SDK。使用React类基本组件工作时没有任何错误，但转向React钩子是一个挑战

出现问题的地方的一个简单示例：

import React, {useState, useEffect} from 'react';
import './App.css';

import * as firebase from "firebase/app";
import 'firebase/auth';

const App = () => {

  const [emailVal, setEmailVal] = useState('')
  const [passwordVal, setPasswordVal] = useState('')

  const handleChangeEmail = (event) => {
    setEmailVal(event.target.value);
  }

  const handleChangePassword = (event) =>{
    setPasswordVal(event.target.value);
  }

  const handleSubmit = (event) =>{
    event.preventDefault();
    const auth = firebase.auth()
    auth.signInWithEmailAndPassword(emailVal, passwordVal)
      .then(response=>{
        console.log(response)
      });
  }

  const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  };

  console.log(firebaseConfig)

  useEffect(()=>{
    console.log("useEffect called")
    firebase.initializeApp(firebaseConfig);
  }, [firebaseConfig])


  return (
    <div className="App">
      <h1>Testing client side authentication</h1>

        <form onSubmit = {handleSubmit}>
          <label>
            Email:
            <input type="text" value={emailVal} onChange={handleChangeEmail} />
          </label>
          <label>
            Password:
            <input type="text"  value={passwordVal} onChange={handleChangePassword}/>
          </label>
          <input type="submit" value="Submit" />
        </form>

    </div>
  );
}

export default App;

这很有效，但我收到了一些警告：

React Hook useEffect缺少依赖项：“firebaseConfig”。任何一个包括它或删除依赖项数组react HOOK/DEP

因此，我的下一步是在useState调用中设置firebaseConfig。但随后我也收到了一些警告，表示没有使用setFirebaseConfig

我可以轻松地将依赖项保留为空，这样useffect就可以像ComponentDidMount一样工作，但是linting警告让我担心我可能会在代码中造成问题

本质上，如果我能比较firebaseConfig中的实际值，并将其添加到useEffect依赖项中，我认为这会起作用，因为一旦加载应用程序，这些值本身是不变的。有人知道怎么做吗

谢谢：）

每次渲染都会创建一个新的

firebaseConfig

对象，从而导致

useffect

再次运行

您可以将

firebaseConfig

移动到组件外部

或者您可以使用

usemo

hook，这样就不会在每次渲染时都创建

firebaseConfig

，如下所示：

const firebaseConfig = useMemo(() => ({
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}), []);