因此,我创建了这个小应用程序来练习 Firebase,第一天我收到“超出配额”错误。我很确定我自己没有发送那么多请求,一定有什么东西导致了这么多请求,但我不知道是什么。这是代码: Auth.js:
import { useEffect, useState } from 'react';
import { auth, googleProvider } from '../config/firebase';
import { createUserWithEmailAndPassword, signInWithPopup, signOut } from 'firebase/auth';
export const Auth = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
useEffect(() => {
console.log(auth?.currentUser?.email);
}, [auth?.currentUser?.email]);
const signIn = async () => {
try {
await createUserWithEmailAndPassword(auth, email, password);
} catch (err) {
console.error(err);
}
}
const signInWithGoogle = async () => {
try {
await signInWithPopup(auth, googleProvider);
} catch (err) {
console.error(err);
}
}
const logout = async () => {
try {
await signOut(auth);
} catch (err) {
console.error(err);
}
}
return (
<div>
<input
type="email"
placeholder="Email..."
onChange={(e) => setEmail(e.target.value)} />
<input
type="password"
placeholder="Password..."
onChange={(e) => setPassword(e.target.value)} />
<button onClick={signIn}>Sign In</button>
<button onClick={signInWithGoogle}>Sign In With Google</button>
<button onClick={logout}>Log out</button>
</div>
)
}
应用程序.js
import { useEffect, useMemo, useState } from 'react';
import { Auth } from './components/auth';
import { db, auth, storage } from './config/firebase';
import { ref, uploadBytes } from 'firebase/storage';
import {
getDocs,
collection,
addDoc,
deleteDoc,
updateDoc,
doc } from 'firebase/firestore';
import './App.css';
function App() {
// movies from db collection
const [movieList, setMovieList] = useState([]);
const moviesCollectionRef = useMemo(() => collection(db, "movies"), []);
// New movie states
const [newMovieTitle, setNewMovieTitle] = useState('');
const [newReleaseDate, setNewReleaseDate] = useState(0);
const [isNewMovieOscar, setIsNewMovieOscar] = useState(false);
// Update title state
const [updatedTitle, setUpdatedTitle] = useState('');
// File upload state
const [fileUpload, setFileUpload] = useState(null);
const onSubmitMovie = async () => {
try {
await addDoc(moviesCollectionRef, {
title: newMovieTitle,
releaseDate: newReleaseDate,
recievedAnOscar: isNewMovieOscar,
userId: auth?.currentUser?.uid
});
} catch (err) {
console.error(err);
}
}
const deleteMovie = async (id) => {
const movieDoc = doc(db, "movies", id);
await deleteDoc(movieDoc);
}
const updateMovieTitle = async (id) => {
const movieDoc = doc(db, "movies", id);
await updateDoc(movieDoc, { title: updatedTitle });
}
useEffect(() => {
const getMovieList = async () => {
try {
const data = await getDocs(moviesCollectionRef);
const filteredData = data.docs.map(doc => ({
...doc.data(),
id: doc.id
}))
setMovieList(filteredData);
} catch (err) {
console.error(err);
}
}
getMovieList();
}, [onSubmitMovie])
const uploadFile = async () => {
if (!fileUpload) return;
const filesFolderRef = ref(storage, `projectFiles/${fileUpload.name}`);
try {
await uploadBytes(filesFolderRef, fileUpload);
} catch (err) {
console.error(err);
}
}
return (
<div className="App">
<Auth />
<div>
<input
type="text"
placeholder='Movie title...'
onChange={(e) => setNewMovieTitle(e.target.value)} />
<input
type="number"
placeholder='Release date...'
onChange={(e) => setNewReleaseDate(Number(e.target.value))} />
<input
type="checkbox"
checked={isNewMovieOscar}
onChange={(e) => setIsNewMovieOscar(e.target.checked)} />
<label>Recieved an Oscar</label>
<button onClick={onSubmitMovie}>Submit movie</button>
</div>
<div>
{movieList.map(movie => (
<div key={movie.id}>
<h1 style={{color: movie.recievedAnOscar ? 'green' : 'red'}}>{movie.title}</h1>
<p>Date: {movie.releaseDate}</p>
<button onClick={() => deleteMovie(movie.id)}>Delete movie</button>
<input
type="text"
placeholder='New title...'
onChange={(e) => setUpdatedTitle(e.target.value)} />
<button onClick={() => updateMovieTitle(movie.id)}>Update Title</button>
</div>
))}
</div>
<div>
<input
type="file"
onChange={(e) => setFileUpload(e.target.files[0])} />
<button onClick={uploadFile}>Upload File</button>
</div>
</div>
);
}
export default App;
我不知道,也许我应该将所有函数包装到 useCallback() 或什么中,它必须有一些东西。如果您已经遇到这个问题,请帮忙
useEffect(() => {
const getMovieList = async () => {
// ...
}
getMovieList();
}, [onSubmitMovie])
因为您将
onSubmitMovie
放入依赖数组中,所以每次组件渲染时都会运行此效果。因此,您可以非常快速地拨打许多电话来获取数据。
似乎没有任何理由将其包含在依赖项数组中,因为它从未被使用过。将其更改为空数组以仅获取挂载上的电影
useEffect(() => {
const getMovieList = async () => {
// ...
}
getMovieList();
}, []);