javascript - TypeError: Object(...) is not a function reactjs 错误
问题描述
您好,我正在开发 Login react.js 项目。当我尝试使用 firebase 登录时,每次都会发生此错误。我试图解决它,但不能。如下图所示的错误:
TypeError: Object(...) 不是函数
下面是错误指向的代码。
import React from 'react'
import { auth, provider } from '../firebase'
import styled from 'styled-components'
import {
selectUserName,
selectUserPhoto,
setUserLogin
} from '../features/user/userSlice'
import images from '../images'
import { useDispatch, useSelector } from 'react-redux'
function Header () {
const dispatch = useDispatch()
const userName = useSelector(selectUserName)
const userphoto = useSelector(selectUserPhoto)
function signInForm () {
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user
dispatch(
setUserLogin({
name: user.displayName,
email: user.email,
photo: user.photoURL
})
)
})
}
return (
<Nav>
<Logo src={images.logo} alt='' />
{!userName ? (
<LoginContainer>
<Login onClick={signInForm}>Login</Login>
</LoginContainer>)
: <>
<NavMenu>
<a>
<img src={images.Home} alt='' />
<span>Home </span>
</a>
<a>
<img src={images.Search} alt='' />
<span>Search</span>
</a>
<a>
<img src={images.WatchList} alt='' />
<span>WatchList</span>
</a>
<a>
<img src={images.Original} alt='' />
<span>Original </span>
</a>
<a>
<img src={images.Movies} alt='' />
<span> Movies </span>
</a>
<a>
<img src={images.Series} alt='' />
<span>Series </span>
</a>
</NavMenu>
<UserImg src={images.User} alt='' />
</>}
</Nav>
)
}
export default Header
这是reducer文件代码
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
name: '',
email: '',
photo: ''
}
const userSlice = createSlice({
name: 'user',
initialState,
reducer: {
setUserLogin: (state, action) => {
state.name = action.payload.name
state.email = action.payload.email
state.photo = action.payload.photo
},
setSignOut: (state) => {
state.name = null
state.email = null
state.photo = null
}
}
})
export const { setUserLogin, setSignOut } = userSlice.actions
export const selectUserName = (state) => state.user.name
export const selectUserEmail = (state) => state.user.email
export const selectUserPhoto = (state) => state.user.photo
export default userSlice.reducer
一切似乎都很好,但问题出在上面的 Header.js 文件中。任何人都可以帮我解决这个问题吗?
解决方案
推荐阅读
- idl-programming-language - 以度而不是弧度绘制
- sql - 组合并计算火花数据框中的 json 列
- node.js - Discord.js - 将文件发送到 PC 上的文件夹
- conditional-statements - 有条件的 FLEX/BISON 代码生成可能吗?
- list - 如何用原始格式写出列表变量
- visual-studio-code - VS 代码终端选项卡颜色
- python - 为什么这个列表元素会在列表中移回?
- java - Java Swing DrawRect:创建新维度替换旧维度
- mysql - 如何添加唯一标识 MySQL 表中列子集的标识符?
- php - 如何在 SQL 中使用 Unix 时间戳选择本周的数据?