React重置密码时，表单对象传入createAsyncThunk后出现undefined

问题出在参数传递方式上：createAsyncThunk的回调函数只接收一个payload参数，如果你需要传递多个值，必须把它们包装成一个对象（或数组），不能分开传递两个独立参数。

正确的实现步骤： #

1. 组件内调用dispatch时，合并参数为一个对象
   把表单数据和resetToken打包成一个对象传递，而不是分开传两个参数：

   // 组件中的提交处理函数
   const onSubmit = (data) => {
     console.log(data); // {password: '123', confirm_password: '123'}
     // 合并成一个对象传递
     dispatch(resetPassword({ passwordData: data, resetToken }));
   };
   

2. 在createAsyncThunk中解构这个对象
   在authSlice的resetThunk函数里，直接解构传入的对象，就能同时拿到密码数据和resetToken：

   // authSlice.js
   import { createAsyncThunk } from '@reduxjs/toolkit';
   
   export const resetPassword = createAsyncThunk(
     'auth/resetPassword',
     async ({ passwordData, resetToken }, thunkAPI) => {
       // 这里可以正常获取passwordData和resetToken
       try {
         const response = await fetch(`/api/reset-password/${resetToken}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(passwordData)
         });
         return await response.json();
       } catch (error) {
         return thunkAPI.rejectWithValue(error.response?.data || error.message);
       }
     }
   );
   

为什么之前的写法会失败？ #

如果你之前是分开传递两个参数（比如dispatch(resetPassword(data, resetToken))），createAsyncThunk会把第一个参数data作为payload，第二个参数resetToken会被当成thunkAPI的配置项，而非payload的一部分。这时候如果你的thunk函数写的是async (passwordData, resetToken) => {...}，resetToken实际拿到的是thunkAPI对象，而你误以为是传入的字符串——但你说resetToken能正常获取，大概率是你把参数顺序搞反了（比如组件传dispatch(resetPassword(resetToken, data))），导致passwordData拿到的是resetToken字符串，解构自然会得到undefined。

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