React Redux中axios.post传参报错：期望0个参数却收到1个

错误原因 #

你遇到的Expected arguments: 0, received: 1错误，根源在于addFavoriteFetch这个createAsyncThunk没有正确声明参数类型。TypeScript会默认推断这个thunk不接受任何参数，而你在组件中调用时传入了对象参数，导致类型不匹配。

修复步骤 #

1. 修正createAsyncThunk的类型声明 #

给addFavoriteFetch添加泛型类型注解，明确指定它接受的参数类型和返回值类型：

// 假设IFavorite包含id、img、title、price这些属性
export const addFavoriteFetch = createAsyncThunk<void, IFavorite>(
    'addFavorite/addFavoriteFetch',
    async (params) => {
        console.log(params);
        // 如果API返回创建后的单个收藏项，这里泛型用IFavorite而非IFavorite[]
        await axios.post<IFavorite>('http://localhost:3001/favorite', params);
    }
);

• 第一个泛型void表示这个thunk没有返回值（如果API返回创建的数据，也可以改为IFavorite并返回data）；
• 第二个泛型IFavorite指定了thunk接受的参数类型，这样TypeScript就知道允许传入一个IFavorite类型的参数。

2. 确认组件中传递的参数类型 #

确保组件中传递给addFavoriteFetch的对象结构与IFavorite类型一致：

// 组件中的dispatch调用（原代码的括号写法没问题，但确保变量存在）
<img 
    onClick={() => dispatch(addFavoriteFetch({id, img, title, price}))} 
    className={styles.contentProductsFavorite} 
    src={favorite ? '/images/heartclick.png' : "/images/heart.png"} 
    alt="" 
/>

3. 可选：返回API响应数据（如果需要） #

如果你的API会返回创建后的收藏项数据，可以修改thunk来返回它，方便后续在reducer中处理：

export const addFavoriteFetch = createAsyncThunk<IFavorite, IFavorite>(
    'addFavorite/addFavoriteFetch',
    async (params) => {
        const { data } = await axios.post<IFavorite>('http://localhost:3001/favorite', params);
        return data; // 返回创建后的收藏项
    }
);

这样修改后，TypeScript的参数不匹配错误就会消失，axios.post也能正确传递数据到后端。

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