TypeError: Object(...) is not a function reactjs 错误

Question

您好，我正在开发 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 文件中。谁能帮我解决这个问题？