未捕获(在承诺中)TypeError:无法读取未定义的属性(读取“类型”)redux reactjs
2022-02-05
1041
从 firebase 和 firestore 调度验证用户时出现以下错误。我正在使用 redux 工具包,使用 firestore 注册用户并进行身份验证,然后获取用户信息以存储在 redux 中,因此调度操作以发送用户信息。 在 firebase 中,我可以看到用户已注册,但无法在 redux 中看到有效负载并出现此错误。
错误屏幕简报
store.js
import { configureStore } from '@reduxjs/toolkit';
import userReducer from '../features/counter/userSlice';
export const store = configureStore({
reducer: {
user: userReducer,
},
});
userSlice.js
import { createSlice } from '@reduxjs/toolkit';
// import { fetchCount } from './counterAPI';
const initialState = {
user: null,
};
export const userSlice = createSlice({
name: 'user',
initialState,
reducers: {
login: (state, action) => {
return state.user = action.payload;
},
logout: (state) => {
return state.user = null;
},
},
});
export const { login, logout } = userSlice.actions;
//selector
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;
Login.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { auth } from './firebase';
import './Login.css'
import login from './features/counter/userSlice'
function Login() {
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [pic, setPic] = useState("")
const dispatch = useDispatch();
const register = () => {
if (!name) {
return alert('Please enter a full name')
}
auth.createUserWithEmailAndPassword(email, password)
.then((userAuth) => {
userAuth.user
.updateProfile({
displayName: name,
photoURL: pic,
})
.then(() => {
dispatch(login({
email: userAuth.user.email,
uid: userAuth.user.uid,
displayName: name,
photoUrl: pic,
})
);
});
})
.catch((error) => alert(error));
}
const loginToApp = (e) => {
e.preventDefault();
}
return (
<div className='login'>
<h2>You are not logedin</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSTv5NTn4Iw_QsC7kW0Lbw3LrlPcPAHso2l9A&usqp=CAU" alt='logo' />
<form>
<input placeholder='Full name (Required if registering)' type="text" value={name} onChange={e => setName(e.target.value)} />
<input placeholder='Profile pic (Optional)' type="text" value={pic} onChange={e => setPic(e.target.value)} />
<input placeholder='Email (Required if registering)' type="email" value={email} onChange={e => setEmail(e.target.value)} />
<input placeholder='Password (Required if registering)' type="password" autoComplete='off' value={password} onChange={e => setPassword(e.target.value)} />
<button onClick={loginToApp}>Sign In</button>
</form>
<p>Not a member?{" "}
<span className='login__register' onClick={register}>Register Now</span>
</p>
</div>
);
}
export default Login;
1个回答
我今天遇到了这个错误,这是由于在 Login.js 文件中错误地导入了 Login 操作造成的。将
import login from './features/counter/userSlice'
更改为
import { login } from './features/counter/userSlice'
Lameck Meshack
2022-06-08