Redux Toolkit登录组件传值异常：Password接收为Undefined求助

直接给你几个必查的点，按顺序排查：

1. 组件dispatch时的参数格式错误 #

别分开传递email和password，必须打包成一个对象传入：

// 错误写法
dispatch(loginUser(email, password))

// 正确写法
dispatch(loginUser({ email, password }))

Redux Toolkit的createAsyncThunk只接收单个参数，分开传的话第二个参数会被当成内部的thunkApi对象，根本不是你要传递的密码。

2. slice里的loginUser未正确解构payload #

检查你的createAsyncThunk定义是否正确：

// 错误写法：直接拆成两个参数，第二个是thunkApi而非密码
export const loginUser = createAsyncThunk(
  'user/login',
  async (email, password) => {
    // 此处password为undefined或thunkApi对象
    const res = await axios.post('/api/login', { email, password })
    return res.data
  }
)

// 正确写法：解构传入的对象
export const loginUser = createAsyncThunk(
  'user/login',
  async ({ email, password }) => {
    const res = await axios.post('/api/login', { email, password })
    return res.data
  }
)

3. 表单输入的state更新逻辑有问题 #

确认密码输入框的name属性为password，且onChange事件正确更新组件state：

const [formData, setFormData] = useState({ email: '', password: '' })

const handleChange = e => {
  setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
}

// 输入框需对应name属性
<input type="password" name="password" onChange={handleChange} />

如果name属性不匹配，state里的password字段不会被正确更新，传递到slice自然会出现undefined。

4. 打印payload直接验证结构 #

在loginUser函数开头添加console语句，查看传入的payload完整结构：

export const loginUser = createAsyncThunk(
  'user/login',
  async (payload) => {
    console.log('Received payload:', payload) // 检查是否包含password字段
    const { email, password } = payload
    const res = await axios.post('/api/login', { email, password })
    return res.data
  }
)

这一步能直接定位问题出在参数传递错误，还是解构逻辑错误。

内容的提问来源于stack exchange，提问作者Haider Mansoor