未处理的拒绝（类型错误）：无法读取未定义的属性“电子邮件”

Question

我是所有系统的新手 react redux-toolkit 和 formik 任何人都可以帮忙解决这个问题

我认为问题是在 redux state，我该如何更新 redux store

以下是错误：-

<块引用>

userSlice.js:53 Uncaught (in promise) TypeError: 无法读取用户/登录/已完成 (userSlice.js:53) 处未定义的属性“电子邮件”

下面是js文件：-

userSlice.js

   import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
    
    const initialState = {
      email: '',
      password: '',
      isFetching: false,
      isError: false,
      isSuccess: false,
      error: '',
    }
    
    export const loginUser = createAsyncThunk(
      'users/login',
      async ({ email, password }, thunkAPI) => {
        try {
          const response = await fetch('http://localhost:8000/api/v1/login/', {
            method: 'POST',
            headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(
              {
                email,
                password,
              },
              null,
              4
            ),
          })
          let data = await response.json()
          console.log('response', data)
        } catch (e) {
          console.log('Error', e.response.data)
          return thunkAPI.rejectWithValue(e.response.data)
        }
      }
    )
    
    const userSlice = createSlice({
      name: 'user',
      initialState,
      reducers: {
        clearState: state => {
          state.isError = false
          state.isSuccess = false
          state.isFetching = false
          return state
        },
      },
      extraReducers: {
        [loginUser.fulfilled]: (state, { payload }) => {
          state.email = payload.email
          state.password = payload.password
          state.isFetching = false
          state.isSuccess = true
          return state
        },
        [loginUser.rejected]: (state, { payload }) => {
          console.log('payload', payload)
          state.isFetching = false
          state.isError = true
          state.errorMessage = payload.message
        },
        [loginUser.pending]: state => {
          state.isFetching = true
        },
      },
    })
    
    export const { clearState } = userSlice.actions
    export default userSlice.reducer

登录.js

    import styled from 'styled-components'
    import { Formik } from 'formik'
    import * as yup from 'yup'
    import Logo from '../icons/Logo'
    import { useDispatch, useSelector } from 'react-redux'
    import { loginUser } from '../features/user/userSlice'
    
    const schema = yup.object().shape({
      email: yup.string().email().required(),
      password: yup.string().required().min(8),
    })
    
    const selectEmail = state => state.login.email
    const selectPassword = state => state.login.password
    
    const Login = () => {
      const email = useSelector(selectEmail)
      const password = useSelector(selectPassword)
      const dispatch = useDispatch()
      return (
        <LoginForm>
          <Container>
            <FormContainer>
              <div>
                <Logo />
              </div>
              <LoginStyle>
                <h1>Login</h1>
              </LoginStyle>
              <HR />
              <Form>
                <Formik
                  initialValues={{ email: email, password: password }}
                  onSubmit={values => {
                    dispatch(loginUser(values))
                  }}
                  validationSchema={schema}
                >
                  {({
                    handleSubmit,
                    handleChange,
                    handleBlur,
                    isValid,
                    errors,
                    touched,
                    values,
                  }) => {
                    return (
                      <form onSubmit={handleSubmit}>
                        <input
                          name={'email'}
                          type={'email'}
                          placeholder={'Email'}
                          onChange={event => {
                            handleChange(event)
                          }}
                          onBlur={handleBlur}
                          value={values.email}
                          style={{
                            borderColor:
                              errors.email && touched.email ? '#dc143c' : 'inherit',
                          }}
                        />
                        <input
                          name={'password'}
                          type={'password'}
                          placeholder={'Password'}
                          onChange={event => {
                            handleChange(event)
                          }}
                          onBlur={handleBlur}
                          value={values.password}
                          style={{
                            borderColor:
                              errors.password && touched.password
                                ? '#dc143c'
                                : 'inherit',
                          }}
                        />
                        <p>Forget Password?</p>
                        <LoginButton type={'submit'} disabled={!isValid}>
                          Login
                        </LoginButton>
                      </form>
                    )
                  }}
                </Formik>
              </Form>
            </FormContainer>
          </Container>
        </LoginForm>
      )
    }